@tecsinapse/react-web-kit 1.3.2 → 1.6.1

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

@@ -1,5 +1,13 @@
 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,
+  transitionStylesLeftRight,
+} from './animations';
 
 export interface DrawerProps {
   open: boolean;
@@ -13,20 +21,40 @@ const Drawer: FC<DrawerProps> = ({
   onClose,
   children,
 }) => {
+  const getStyles = (anchorPosition: string, state: any) => {
+    const stylesLeftRight = defaultStylesLeftRight(anchorPosition);
+    const transitionLeftRight = transitionStylesLeftRight(anchorPosition);
+    const stylesTopBottom = defaultStylesTopBottom(anchorPosition);
+    const transitionTopBottom = transitionStylesTopBottom(anchorPosition);
+
+    if (['left', 'right'].includes(anchorPosition)) {
+      return {
+        ...stylesLeftRight,
+        ...transitionLeftRight[state],
+      };
+    } else {
+      return {
+        ...stylesTopBottom,
+        ...transitionTopBottom[state],
+      };
+    }
+  };
+
   return (
     <>
-      {open && (
-        <>
-          <StyledOverlay onClick={onClose} />
+      <Overlay timeout={300} open={open} onClose={onClose} zIndex="drawer" />
+      <Transition in={open} timeout={300}>
+        {state => (
           <StyledContainerDrawer
+            style={getStyles(anchorPosition, state)}
             anchorPosition={anchorPosition}
             onClose={onClose}
             open={open}
           >
             {children}
           </StyledContainerDrawer>
-        </>
-      )}
+        )}
+      </Transition>
     </>
   );
 };

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

@@ -0,0 +1,50 @@
+export const transformLeftRigthClose = (anchorPosition: string) =>
+  anchorPosition === 'right' ? 'translateX(100%)' : 'translateX(-100%)';
+
+export const transformLeftRigthOpen = 'translateX(0)';
+
+export const transformTopBottomClose = (anchorPosition: string) =>
+  anchorPosition === 'top' ? 'translateY(-100%)' : 'translateY(100%)';
+
+export const transformTopBottomOpen = 'translateY(0%)';
+
+export const defaultStylesLeftRight = (anchorPosition: string) => {
+  return {
+    transition: 'transform 300ms ease-in-out',
+    transform: () => transformLeftRigthClose(anchorPosition),
+    overflow: 'hidden',
+  };
+};
+
+export const transitionStylesLeftRight = (anchorPosition: string) => {
+  return {
+    entering: { transform: transformLeftRigthClose(anchorPosition) },
+    entered: {
+      transform: transformLeftRigthOpen,
+    },
+    exiting: {
+      transform: transformLeftRigthOpen,
+    },
+    exited: { transform: transformLeftRigthClose(anchorPosition) },
+  };
+};
+
+export const defaultStylesTopBottom = (anchorPosition: string) => {
+  return {
+    transition: 'transform 300ms ease-in-out',
+    transform: transformTopBottomClose(anchorPosition),
+    overflow: 'hidden',
+  };
+};
+export const transitionStylesTopBottom = (anchorPosition: string) => {
+  return {
+    entering: { transform: transformTopBottomClose(anchorPosition) },
+    entered: {
+      transform: transformTopBottomOpen,
+    },
+    exiting: {
+      transform: transformTopBottomOpen,
+    },
+    exited: { transform: transformTopBottomClose(anchorPosition) },
+  };
+};

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

@@ -3,16 +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>>`
-  background: ${({ theme }: StyleProps) =>
-    hex2rgba(theme.miscellaneous.overlay, 0.5)};
-  width: 100vw;
-  height: 100vh;
-  z-index: ${({ theme }: StyleProps) => theme.zIndex.drawer};
-  cursor: pointer;
-  position: absolute;
-`;
-
 const anchorLeft = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
   return (
     anchorPosition === 'left' &&
@@ -66,9 +56,10 @@ const baseStyles = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
   return css`
     height: ${['left', 'right'].includes(anchorPosition) && '100vh'};
     width: ${['top', 'bottom'].includes(anchorPosition) && '100wh'};
-    position: absolute;
+    position: fixed;
+    overflow: hidden;
     background-color: ${theme.miscellaneous.bodyColor};
-    z-index: ${theme.zIndex.drawer + 1};
+    z-index: ${theme.zIndex.drawer};
   `;
 };
 

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

@@ -5,7 +5,7 @@ import { InputPassword } from '.';
 import Input, { InputPasswordWebProps } from './InputPassword';
 
 export default {
-  title: 'Components/InputPassword',
+  title: 'Components/Input Password',
   component: Input,
 };
 

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/MenuBlock/MenuItem/styled.ts

@@ -11,4 +11,7 @@ export const StyledSubButton = styled('span')<Partial<StyleProps>>`
   padding-top: ${({ theme }) => theme.spacing.nano} 0 0 0;
   margin-left: ${({ theme }) => theme.spacing.mili};
   cursor: pointer;
+  & * {
+    user-select: none;
+  }
 `;

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,27 @@ 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>
+        }
+      />
+      Content
+    </>
   );
 };
 

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';
+import { Transition } from 'react-transition-group';
 import {
   StyledIconInput,
   StyledMenuBar,
@@ -10,37 +11,46 @@ import {
   StyledSearchResultsContainer,
   StyledSearchTextContainer,
 } from './styled';
-import { Masonry } from '../Masonry';
 import { MostUsedType, OptionsType } from './types';
 import { MostUsed } from './MostUsed';
 import { MenuBlock } from './MenuBlock';
 import { SearchResultItem } from './SearchResultItem';
 import { filterAndTransform } from './utils';
+import {
+  getContainerOpenMenuStyles,
+  getInputContainerStyles,
+} 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 [menuOpen, setMenuOpen] = React.useState<boolean>(true);
   const [search, setSearch] = React.useState<string>('');
   const [results, setResults] = React.useState<MostUsedType[]>([]);
   const [input, setInput] = useDebouncedState('', state => setSearch(state));
+  const [open, setOpen] = React.useState<boolean>(false);
+
+  const toggleOpen = React.useCallback(() => setOpen(state => !state), [
+    setOpen,
+  ]);
 
   React.useEffect(() => {
     if (search === '') return;
@@ -50,12 +60,8 @@ const Menubar: React.FC<MenubarProps> = ({
   return (
     <>
       <StyledMenuBar>
-        <StyledMenuButton
-          variant="filled"
-          color="primary"
-          onPress={() => setMenuOpen(!menuOpen)}
-        >
-          {!menuOpen ? (
+        <StyledMenuButton variant="filled" color="primary" onPress={toggleOpen}>
+          {!open ? (
             <Icon
               size="deca"
               name="menu"
@@ -72,49 +78,57 @@ const Menubar: React.FC<MenubarProps> = ({
           )}
         </StyledMenuButton>
         {leftComponents}
-        {menuOpen && (
-          <StyledInputContainer>
-            <StyledInput
-              placeholder={inputPlaceholder}
-              leftComponent={
-                <StyledIconInput>
-                  <Icon name="magnify" type="material-community" />
-                </StyledIconInput>
-              }
-              value={input}
-              onChange={setInput}
-            />
-          </StyledInputContainer>
-        )}
+        <Transition in={open} timeout={250}>
+          {state => (
+            <StyledInputContainer style={getInputContainerStyles(state)}>
+              {searchable && (
+                <StyledInput
+                  placeholder={searchPlaceholder}
+                  leftComponent={
+                    <StyledIconInput>
+                      <Icon name="magnify" type="material-community" />
+                    </StyledIconInput>
+                  }
+                  value={input}
+                  onChange={setInput}
+                />
+              )}
+            </StyledInputContainer>
+          )}
+        </Transition>
         {rightComponents}
       </StyledMenuBar>
-      {menuOpen && (
-        <StyledContainerOpenMenu>
-          {!search ? (
-            <>
-              {mostUsed && <MostUsed label={mostUsedLabel} data={mostUsed} />}
-              <Masonry columns={4} spacingTop="kilo" spacingLeft="mega">
-                {options.map(option => (
-                  <MenuBlock data={option} key={option.title} />
+      <Transition in={open} timeout={250}>
+        {state => (
+          <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}
+                  />
                 ))}
-              </Masonry>
-            </>
-          ) : (
-            <StyledSearchResultsContainer>
-              <StyledSearchTextContainer>
-                <Text fontWeight="bold">{searchResultsLabel}</Text>
-              </StyledSearchTextContainer>
-              {results.map(result => (
-                <SearchResultItem
-                  key={`${result.title}-${result.category}`}
-                  data={result}
-                  searchTerm={search}
-                />
-              ))}
-            </StyledSearchResultsContainer>
-          )}
-        </StyledContainerOpenMenu>
-      )}
+              </StyledSearchResultsContainer>
+            )}
+          </StyledContainerOpenMenu>
+        )}
+      </Transition>
     </>
   );
 };