@tecsinapse/react-web-kit 1.22.2 → 1.22.4

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

@@ -1,279 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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;

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

@@ -1,54 +0,0 @@
-import React from 'react';
-import { Text } from '@tecsinapse/react-core';
-import { StyledCard, StyledCardContainer } from './styled';
-import { MostUsedType } from '../types';
-
-interface MostUsedProps {
-  data: MostUsedType[];
-  label: string;
-  toggle: () => void;
-}
-
-const MostUsed: React.FC<MostUsedProps> = ({ data, label, toggle }) => {
-  const noTextDecoration = { textDecoration: 'none' };
-
-  return (
-    <>
-      <Text fontWeight="bold">{label}</Text>
-      <StyledCardContainer>
-        {data
-          .slice(0, 4)
-          .map(
-            ({
-              title,
-              category,
-              Component = 'a',
-              props = {},
-            }: MostUsedType) => (
-              <Component
-                {...props}
-                style={noTextDecoration}
-                key={`${title}-${category}`}
-                onClick={toggle}
-              >
-                <StyledCard elevated key={`${title}-${category}`}>
-                  <Text fontWeight="bold" colorVariant="primary">
-                    {title}
-                  </Text>
-                  <Text
-                    fontWeight="bold"
-                    colorVariant="secondary"
-                    typography="label"
-                  >
-                    {category}
-                  </Text>
-                </StyledCard>
-              </Component>
-            )
-          )}
-      </StyledCardContainer>
-    </>
-  );
-};
-
-export default React.memo(MostUsed);

package/src/components/molecules/Menubar/MostUsed/index.ts

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

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

@@ -1,18 +0,0 @@
-import { default as webStyled } from '@emotion/styled';
-import { Card, StyleProps } from '@tecsinapse/react-core';
-import { default as nativeStyled } from '@emotion/native';
-
-export const StyledCardContainer = webStyled('div')<Partial<StyleProps>>`
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-column-gap: ${({ theme }) => theme.spacing.mega};
-    margin-bottom: ${({ theme }) => theme.spacing.kilo};
-    margin-top: ${({ theme }) => theme.spacing.centi};
-`;
-
-export const StyledCard = nativeStyled(Card)<Partial<StyleProps>>`
-    padding-top: ${({ theme }) => theme.spacing.mili};
-    padding-bottom: ${({ theme }) => theme.spacing.mili};
-    padding-left: ${({ theme }) => theme.spacing.deca};
-    padding-right: ${({ theme }) => theme.spacing.deca};
-`;

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

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Text, TextProps } from '@tecsinapse/react-core';
-import { MostUsedType } from '../types';
-import { StyledSearchItemContainer, HighlightText } from './styled';
-import { highlight } from './utils';
-
-interface SearchResultItem {
-  data: MostUsedType;
-  searchTerm: string;
-  toggle: () => void;
-}
-
-const SearchResultItem: React.FC<SearchResultItem> = ({
-  data,
-  searchTerm,
-  toggle,
-}) => {
-  const { title, category, Component, props } = data;
-  const noTextDecoration = { textDecoration: 'none' };
-
-  const textProps: TextProps = { fontColor: 'orange', fontWeight: 'bold' };
-
-  return (
-    <Component {...props} style={noTextDecoration} onClick={toggle}>
-      <StyledSearchItemContainer>
-        <Text typography="base" colorVariant="secondary" colorTone="dark">
-          {highlight(searchTerm, title, HighlightText, textProps)}
-        </Text>
-        <Text
-          typography="sub"
-          fontWeight="bold"
-          colorVariant="secondary"
-          colorTone="medium"
-        >
-          {category}
-        </Text>
-      </StyledSearchItemContainer>
-    </Component>
-  );
-};
-
-export default SearchResultItem;

package/src/components/molecules/Menubar/SearchResultItem/index.ts

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

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

@@ -1,19 +0,0 @@
-import styled from '@emotion/styled';
-import { default as nativeStyled } from '@emotion/native';
-import { hex2rgba, StyleProps, Text } from '@tecsinapse/react-core';
-
-export const StyledSearchItemContainer = styled('div')<Partial<StyleProps>>`
-  display: flex;
-  flex-direction: column;
-  padding: ${({ theme }) => `${theme.spacing.mili} 0 ${theme.spacing.centi} 0`};
-  border-top: ${({ theme }) =>
-    `${theme.borderWidth.pico} solid ${hex2rgba(
-      theme.miscellaneous.shadow,
-      0.05
-    )}`};
-`;
-
-export const HighlightText = nativeStyled(Text)<Partial<StyleProps>>`
-  text-decoration: underline;
-  text-decoration-color: ${({ theme }) => theme.font.color.orange};
-`;

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

@@ -1,80 +0,0 @@
-import React from 'react';
-
-const normalize = (str: string): string => {
-  return str
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .replace(/[-[\]{}()*+?.,\\^$|#]/g, ' ')
-    .toLowerCase();
-};
-
-const matchSpliter = (
-  str: string,
-  indexes: number[],
-  size: number
-): string[] => {
-  const result: string[] = [];
-  let currentIndex = 0;
-
-  indexes.forEach((index: number) => {
-    result.push(str.substring(currentIndex, index));
-    result.push(str.substring(index, index + size));
-    currentIndex = index + size;
-  });
-
-  result.push(str.substring(currentIndex, str.length));
-
-  return result.filter(e => e);
-};
-
-export const stringMatcher = (
-  searchTerm: string,
-  textToReplace: string
-): RegExpMatchArray[] => {
-  const s = normalize(searchTerm);
-  const tx = normalize(textToReplace);
-
-  const r = new RegExp(`(${s})`, 'g');
-
-  return Array.from(tx.matchAll(r));
-};
-
-const highlightReplacer = <T,>(
-  searchTerm: string,
-  textToReplace: string,
-  Component: React.ElementType,
-  props: T
-): React.ReactNode => {
-  const search = normalize(searchTerm);
-  const matches = stringMatcher(searchTerm, textToReplace);
-
-  if (matches.length <= 0) {
-    return textToReplace;
-  }
-
-  const indexes: number[] = matches.map(match => match.index) as number[];
-  const splited = matchSpliter(textToReplace, indexes, searchTerm.length);
-
-  return splited.map((value, idx) => {
-    return normalize(value) === search ? (
-      <Component key={`highlight-${value}${idx}`} {...props}>
-        {value}
-      </Component>
-    ) : (
-      <>{value}</>
-    );
-  });
-};
-
-export const highlight = <T,>(
-  searchTerm: string,
-  textToReplace: string,
-  Component: React.ElementType,
-  props: T
-): React.ReactNode => {
-  if (textToReplace && searchTerm) {
-    return highlightReplacer(searchTerm, textToReplace, Component, props);
-  }
-
-  return textToReplace;
-};