@tecsinapse/react-web-kit 1.22.1-beta.8 → 1.22.2

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Text } from '@tecsinapse/react-core';
+import { MenuItem } from './MenuItem';
+import {
+  StyledContainerItems,
+  StyledContainerMenu,
+  StyledLeftComponent,
+} from './styled';
+import { ItemsOptions, OptionsType } from '../types';
+import { Masonry } from '../../Masonry';
+
+interface MenuBlockProps {
+  toggle: () => void;
+  options: OptionsType[];
+}
+
+const MenuBlock: React.FC<MenuBlockProps> = ({ options, toggle }) => {
+  return (
+    <Masonry columns={4} spacingTop="kilo" spacingLeft="mega">
+      {options.map(data => (
+        <React.Fragment key={`${data.title}`}>
+          <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>
+        </React.Fragment>
+      ))}
+    </Masonry>
+  );
+};
+
+export default React.memo(MenuBlock);

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

@@ -0,0 +1,68 @@
+import React, { ElementType } from 'react';
+import { Icon, Text } from '@tecsinapse/react-core';
+import { SubMenuBlock } from './SubMenuBlock';
+import { StyledRightComponent, StyledText } from '../styled';
+import { StyledContainerItemText, StyledSubButton } from './styled';
+import { ItemsOptions } from '../../types';
+
+interface MenuItemProps {
+  title: string;
+  /** Wrapping component for element. This is used for navigation */
+  Component: ElementType;
+  /** Properties spread to wrapping Component */
+  props: any;
+  toggle: () => void;
+  rightComponents?: React.ReactNode;
+  items?: ItemsOptions[];
+}
+
+const MenuItem: React.FC<MenuItemProps> = ({
+  title,
+  Component = 'a',
+  props = {},
+  rightComponents,
+  items,
+  toggle,
+}) => {
+  const [open, setOpen] = React.useState<boolean>(false);
+
+  const noTextDecoration = { textDecoration: 'none' };
+
+  const getIconName = () =>
+    open ? 'arrow-up-drop-circle-outline' : 'arrow-down-drop-circle-outline';
+
+  const handleMenuAction = () => setOpen(!open);
+
+  return (
+    <>
+      <StyledContainerItemText key={title}>
+        <Component {...props} style={noTextDecoration} onClick={toggle}>
+          <Text
+            colorVariant={open ? 'primary' : 'secondary'}
+            colorTone={open ? 'medium' : 'dark'}
+          >
+            <StyledText>{title}</StyledText>
+          </Text>
+        </Component>
+        {rightComponents && !items && (
+          <StyledRightComponent>{rightComponents}</StyledRightComponent>
+        )}
+        {items && (
+          <StyledSubButton onClick={handleMenuAction}>
+            <Icon
+              name={getIconName()}
+              type="material-community"
+              fontColor="orange"
+            />
+          </StyledSubButton>
+        )}
+      </StyledContainerItemText>
+      {open &&
+        items?.map(subItem => (
+          <SubMenuBlock key={subItem.title} data={subItem} toggle={toggle} />
+        ))}
+    </>
+  );
+};
+
+export default MenuItem;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text } from '@tecsinapse/react-core';
+import { StyledRightComponent, StyledText } from '../../styled';
+import { ItemsOptions } from '../../../types';
+import { DummyBorder, StyledContainerItem } from './styled';
+
+interface SubMenuBlockProps {
+  data: ItemsOptions;
+  toggle: () => void;
+}
+
+const SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data, toggle }) => {
+  const { Component, props, rightComponents, title } = data;
+
+  const noTextDecoration = { textDecoration: 'none' };
+
+  return (
+    <StyledContainerItem>
+      <DummyBorder />
+      <Component {...props} style={noTextDecoration} onClick={toggle}>
+        <Text colorVariant="secondary" colorTone="medium" typography="sub">
+          <StyledText>{title}</StyledText>
+        </Text>
+      </Component>
+      {rightComponents && (
+        <StyledRightComponent>{rightComponents}</StyledRightComponent>
+      )}
+    </StyledContainerItem>
+  );
+};
+
+export default SubMenuBlock;

package/src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/index.ts

@@ -0,0 +1 @@
+export { default as SubMenuBlock } from './SubMenuBlock';

package/src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+import { StyleProps } from '@tecsinapse/react-core';
+
+export const StyledContainerItem = styled('div')<Partial<StyleProps>>`
+  display: flex;
+  align-items: center;
+`;
+
+export const DummyBorder = styled('div')<Partial<StyleProps>>`
+  height: ${({ theme }) => theme.typography.sub.fontSize};
+  border-left: ${({ theme }) =>
+    `${theme.borderWidth.pico} solid ${theme.color.primary.medium}`};
+  margin-right: ${({ theme }) => theme.spacing.mili};
+`;

package/src/components/molecules/Menubar/MenuBlock/MenuItem/index.ts

@@ -0,0 +1 @@
+export { default as MenuItem } from './MenuItem';

package/src/components/molecules/Menubar/MenuBlock/MenuItem/styled.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+import { StyleProps } from '@tecsinapse/react-core';
+
+export const StyledContainerItemText = styled('div')<Partial<StyleProps>>`
+  margin-top: ${({ theme }) => theme.spacing.mili};
+  display: flex;
+  align-items: center;
+`;
+
+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/MenuBlock/index.ts

@@ -0,0 +1 @@
+export { default as MenuBlock } from './MenuBlock';

package/src/components/molecules/Menubar/MenuBlock/styled.ts

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
+
+export const StyledLeftComponent = styled('div')<Partial<StyleProps>>`
+  margin-right: ${({ theme }) => theme.spacing.mili};
+`;
+
+export const StyledRightComponent = styled('div')<Partial<StyleProps>>`
+  margin-left: ${({ theme }) => theme.spacing.mili};
+`;
+
+export const StyledContainerMenu = styled('div')<Partial<StyleProps>>`
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  border-bottom: ${({ theme }) =>
+    `${theme.borderWidth.pico} solid ${hex2rgba(
+      theme.miscellaneous.shadow,
+      0.05
+    )}`};
+  width: 100%;
+  padding-bottom: ${({ theme }) => theme.spacing.mili};
+`;
+
+export const StyledContainerItems = styled('div')<Partial<StyleProps>>`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const StyledText = styled('span')<Partial<StyleProps>>`
+  &:hover {
+    color: ${({ theme }) => theme.font.color.orange};
+  }
+`;

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

@@ -0,0 +1,279 @@
+import React, { ElementType } from 'react';
+import Menubar, { MenubarProps } from './Menubar';
+import { Story } from '@storybook/react';
+import styled from '@emotion/styled';
+import { Avatar, Icon, Text } from '@tecsinapse/react-core';
+
+export default {
+  title: 'Web/Menu Bar',
+  component: Menubar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const EXAMPLE_MENU = [
+  {
+    title: 'Categoria do menu 1',
+    leftComponents: <Icon name="magnify" type="material-community" />,
+    items: [
+      {
+        title: 'Item de menu 1',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item de menu 2',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item de menu 3',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item de menu 4',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item de menu 5',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+    ],
+  },
+  {
+    title: 'Categoria do menu 2',
+    items: [
+      {
+        title: 'Item menu 1',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+        items: [
+          {
+            title: 'Item menu 1.1',
+            Component: 'a' as ElementType,
+            props: { href: '#' },
+            rightComponents: undefined,
+          },
+          {
+            title: 'Item menu 1.2',
+            Component: 'a' as ElementType,
+            props: { href: '#' },
+            rightComponents: undefined,
+          },
+        ],
+      },
+      {
+        title: 'Item menu 2',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+        items: [
+          {
+            title: 'Item menu 2.1',
+            Component: 'a' as ElementType,
+            props: { href: '#' },
+            rightComponents: (
+              <div
+                style={{
+                  display: 'flex',
+                  backgroundColor: '#2db783',
+                  borderRadius: '4px',
+                  padding: '3px',
+                }}
+              >
+                <Text fontColor="light" typography="label">
+                  Novo
+                </Text>
+              </div>
+            ),
+          },
+          {
+            title: 'Item menu 2.2',
+            Component: 'a' as ElementType,
+            props: { href: '#' },
+            rightComponents: undefined,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Categoria do menu 3',
+    items: [
+      {
+        title: 'Item menu 1',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item menu 2',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item menu 3',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+    ],
+  },
+  {
+    title: 'Categoria do menu 4',
+    items: [
+      {
+        title: 'Item menu 1',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item menu 2',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item menu 3',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+    ],
+  },
+  {
+    title: 'Categoria do menu 5',
+    items: [
+      {
+        title: 'Item menu 1',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item menu 2',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item menu 3',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+    ],
+  },
+  {
+    title: 'Categoria do menu 6',
+    items: [
+      {
+        title: 'Item menu 1',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item menu 2',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item menu 3',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: undefined,
+      },
+      {
+        title: 'Item menu 4',
+        Component: 'a' as ElementType,
+        props: { href: '#' },
+        rightComponents: (
+          <div
+            style={{
+              display: 'flex',
+              backgroundColor: '#2db783',
+              borderRadius: '4px',
+              padding: '3px',
+            }}
+          >
+            <Text fontColor="light" typography="label">
+              Novo
+            </Text>
+          </div>
+        ),
+      },
+    ],
+  },
+];
+
+const MOST_USED = [
+  {
+    title: 'Item de menu 1',
+    category: 'Categoria de menu 1',
+    Component: 'a' as ElementType,
+    props: { href: '#' },
+  },
+  {
+    title: 'Item de menu 2',
+    category: 'Categoria de menu 2',
+    Component: 'a' as ElementType,
+    props: { href: '#' },
+  },
+  {
+    title: 'Item de menu 3',
+    category: 'Categoria de menu 3',
+    Component: 'a' as ElementType,
+    props: { href: '#' },
+  },
+  {
+    title: 'Item de menu 4',
+    category: 'Categoria de menu 4',
+    Component: 'a' as ElementType,
+    props: { href: '#' },
+  },
+];
+
+const StyledImage = styled('img')`
+  width: auto;
+  height: 35px;
+  margin-right: 35px;
+`;
+
+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"
+          />
+        }
+        rightComponents={
+          <div style={{ marginLeft: 24 }}>
+            <Avatar name="Design System" />
+          </div>
+        }
+      />
+    </>
+  );
+};
+
+export const Base = Template.bind({});

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

@@ -0,0 +1,142 @@
+import React, { useRef } from 'react';
+import { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';
+import { Transition } from 'react-transition-group';
+import {
+  StyledIconInput,
+  StyledMenuBar,
+  StyledMenuButton,
+  StyledContainerOpenMenu,
+  StyledInput,
+  StyledInputContainer,
+  StyledSearchResultsContainer,
+  StyledSearchTextContainer,
+} from './styled';
+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';
+import { useClickAwayListener } from '../../../hooks';
+
+export interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {
+  options: OptionsType[];
+  leftComponents?: React.ReactNode;
+  rightComponents?: React.ReactNode;
+  /** Limited to first 4 elements */
+  mostUsed?: MostUsedType[];
+  mostUsedLabel?: string;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  searchResultsLabel?: string;
+}
+
+const Menubar: React.FC<MenubarProps> = ({
+  leftComponents,
+  rightComponents,
+  searchPlaceholder = 'O quê você deseja buscar?',
+  options,
+  mostUsed,
+  mostUsedLabel = 'Mais acessados',
+  searchResultsLabel = 'Resultados da busca',
+  searchable = true,
+  ...rest
+}) => {
+  const [search, setSearch] = React.useState<string>('');
+  const [results, setResults] = React.useState<MostUsedType[]>([]);
+  const [input, setInput] = useDebouncedState<string>('', setSearch);
+  const [open, setOpen] = React.useState<boolean>(false);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  useClickAwayListener(menuRef, setOpen, 'mouseup');
+
+  const toggleOpen = React.useCallback(
+    () => setOpen(state => !state),
+    [setOpen]
+  );
+
+  React.useEffect(() => {
+    if (search === '') return;
+    setResults(filterAndTransform(options, search));
+  }, [search]);
+
+  return (
+    <div ref={ref => (menuRef.current = ref)} {...rest}>
+      <StyledMenuBar>
+        <StyledMenuButton variant="filled" color="primary" onPress={toggleOpen}>
+          {!open ? (
+            <Icon
+              size="deca"
+              name="menu"
+              type="material-community"
+              fontColor="light"
+            />
+          ) : (
+            <Icon
+              size="deca"
+              name="close"
+              type="material-community"
+              fontColor="light"
+            />
+          )}
+        </StyledMenuButton>
+        {leftComponents}
+        <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>
+      <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}
+                    toggle={toggleOpen}
+                  />
+                ))}
+              </StyledSearchResultsContainer>
+            )}
+          </StyledContainerOpenMenu>
+        )}
+      </Transition>
+    </div>
+  );
+};
+
+export default Menubar;