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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,64 @@
+import { CSSProperties } from 'react';
+import { TransitionStatus } from 'react-transition-group';
+
+const getDefaultInputContainerStyles = {
+  transitionDuration: '250ms',
+  transitionProperty: 'opacity scale transform',
+  transitionTimingFunction: 'ease-in-out',
+};
+
+const getDefaultContainerOpenMenuStyles = {
+  transitionDuration: '250ms',
+  transitionProperty: 'opacity scale transform',
+  transitionTimingFunction: 'ease-in-out',
+};
+
+const getInputContainerTransform = {
+  entered: {
+    transform: 'scale(1, 1) translateY(0px)',
+  },
+  entering: {
+    opacity: 0.5,
+    transform: 'scale(0.99, 0.99) translateY(-5px)',
+  },
+  exited: {
+    opacity: 0,
+    transform: 'scale(0.99, 0.99) translateY(-50px)',
+  },
+  exiting: {
+    opacity: 0.5,
+    transform: 'scale(0.99, 0.99) translateY(-5px)',
+  },
+};
+
+const getContainerOpenMenuTransform = {
+  entered: {
+    transform: 'scale(1, 1) translateY(0px) ',
+  },
+  entering: {
+    opacity: 0.95,
+    transform: 'scale(0.99, 0.99) translateY(0px)',
+  },
+  exited: {
+    opacity: 0,
+    transform: 'scale(0.99, 0.99) translateY(-600px)',
+  },
+  exiting: {
+    opacity: 0.95,
+    transform: 'scale(0.99, 0.99) translateY(0px)',
+  },
+};
+
+export const getInputContainerStyles = (
+  state: TransitionStatus
+): CSSProperties => ({
+  ...getDefaultInputContainerStyles,
+  ...getInputContainerTransform[state],
+});
+
+export const getContainerOpenMenuStyles = (
+  state: TransitionStatus
+): CSSProperties => ({
+  ...getDefaultContainerOpenMenuStyles,
+  ...getContainerOpenMenuTransform[state],
+});

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

@@ -0,0 +1,7 @@
+export { default as Menubar } from './Menubar';
+export type {
+  OptionsType as MenubarOptionsType,
+  MostUsedType as MenubarMostUsedType,
+  ItemsOptions as MenubarItemsOptions,
+} from './types';
+export * from './Menubar';

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

@@ -0,0 +1,73 @@
+import { default as webStyled } from '@emotion/styled';
+import { default as nativeStyled } from '@emotion/native';
+import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
+import { Button } from '../../atoms/Button';
+import { Input } from '../../atoms/Input';
+
+export const StyledIconInput = webStyled('div')<Partial<StyleProps>>`
+  padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);
+  padding-left: ${({ theme }) => theme.spacing.centi};
+  padding-bottom: calc(${({ theme }) => theme.spacing.centi} - 2px);
+  padding-right: ${({ theme }) => theme.spacing.centi};
+`;
+
+export const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`
+    position: relative;
+    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};
+    box-shadow: 0px 2px 8px ${({ theme }) =>
+      hex2rgba(theme.miscellaneous.shadow, 0.05)};
+`;
+
+export const StyledMenuButton = nativeStyled(Button)<Partial<StyleProps>>`
+    padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);
+    padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);
+    padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);
+    padding-left: calc(${({ theme }) => theme.spacing.centi} + 2px);
+    margin-right: ${({ theme }) => theme.spacing.kilo};
+    & * {
+      user-select: none;
+    }
+`;
+
+export const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`
+    border-top: ${({ theme }) =>
+      `${theme.borderWidth.pico} solid ${hex2rgba(
+        theme.miscellaneous.shadow,
+        0.05
+      )}`};
+    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor}; 
+    border-bottom-left-radius: ${({ theme }) => theme.borderRadius.mili}; 
+    border-bottom-right-radius: ${({ theme }) => theme.borderRadius.mili};
+    box-shadow: 0px 2px 8px ${({ theme }) =>
+      hex2rgba(theme.miscellaneous.shadow, 0.05)};
+    padding-right: 8vw;
+    padding-left: 8vw;
+    padding-top: ${({ theme }) => theme.spacing.kilo};
+    padding-bottom: ${({ theme }) => theme.spacing.mega};
+    position: absolute;
+    z-index: ${({ theme }) => theme.zIndex.header + 1};
+    width: -webkit-fill-available;
+    width: -moz-available;
+`;
+
+export const StyledInput = nativeStyled(Input)<Partial<StyleProps>>`
+     width: 100%;
+`;
+
+export const StyledInputContainer = webStyled('div')`
+    display: flex;
+    flex: 1;
+`;
+
+export const StyledSearchResultsContainer = webStyled('div')`
+    display: flex;
+    flex-direction: column;
+`;
+
+export const StyledSearchTextContainer = webStyled('div')<Partial<StyleProps>>`
+    margin-bottom: ${({ theme }) => theme.spacing.mili};
+`;

package/src/components/molecules/Menubar/types.ts

@@ -0,0 +1,26 @@
+import React, { ElementType } from 'react';
+
+export type MostUsedType = {
+  title: string;
+  category: string;
+  /** Wrapping component for element. This is used for navigation */
+  Component: ElementType;
+  /** Properties spread to wrapping Component */
+  props: any;
+};
+
+export type ItemsOptions = {
+  title: string;
+  /** Wrapping component for element. This is used for navigation */
+  Component: ElementType;
+  /** Properties spread to wrapping Component */
+  props: any;
+  rightComponents?: React.ReactNode;
+  items?: ItemsOptions[];
+};
+
+export type OptionsType = {
+  title: string;
+  items: ItemsOptions[];
+  leftComponents?: React.ReactNode;
+};

package/src/components/molecules/Menubar/utils.ts

@@ -0,0 +1,32 @@
+import { MostUsedType, OptionsType } from './types';
+
+export const filterAndTransform = (
+  options: OptionsType[],
+  search: string
+): MostUsedType[] => {
+  const normalized: MostUsedType[] = [];
+  options.forEach(option => {
+    option.items.forEach(item => {
+      if (item.title.toLowerCase().startsWith(search)) {
+        normalized.push({
+          title: item.title,
+          Component: item.Component,
+          props: item.props,
+          category: option.title,
+        });
+      }
+      item.items?.forEach(sub => {
+        if (sub.title.toLowerCase().startsWith(search)) {
+          normalized.push({
+            title: sub.title,
+            Component: sub.Component,
+            props: sub.props,
+            category: option.title,
+          });
+        }
+      });
+    });
+  });
+
+  return normalized;
+};

package/src/components/molecules/Select/Dropdown/Dropdown.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { Checkbox, Text, useDebouncedState } from '@tecsinapse/react-core';
+import { ItemSelect } from '../SelectItem';
+import { SelectProps } from '../Select';
+import {
+  SearchBarContainer,
+  StyledContainerCheckAll,
+  StyledContainerDropdown,
+  StyledContainerTextLabel,
+  StyledSpan,
+  OptionsContainer,
+  PaddedContainer,
+} from './styled';
+import { SearchInput } from './components';
+
+const fullWidth = { width: '100%' };
+
+const Dropdown = <Data, Type extends 'single' | 'multi'>({
+  options,
+  onSearch,
+  type,
+  hideSearchBar,
+  onSelect,
+  value,
+  keyExtractor,
+  labelExtractor,
+  setDropDownVisible,
+  style,
+  anchor,
+  selectAllLabel,
+  searchBarPlaceholder,
+}: SelectProps<Data, Type> & {
+  setDropDownVisible: (t: boolean) => void;
+}): JSX.Element => {
+  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);
+  const lengthOptions = React.useMemo(() => options.length, [options]);
+
+  const [checkedAll, setCheckedAll] = React.useState<boolean>(
+    type === 'multi' && (value as Data[])?.length === lengthOptions
+  );
+
+  React.useEffect(() => {
+    if (type === 'multi') {
+      lengthOptions === (value as Data[])?.length
+        ? setCheckedAll(true)
+        : setCheckedAll(false);
+    }
+  }, [value, type, lengthOptions]);
+
+  const onClickCheckAll = React.useCallback(() => {
+    const items = (options as Data[]).map(option => option);
+    let aux;
+    setCheckedAll(prev => {
+      aux = !prev;
+      return !prev;
+    });
+    type OnSelectArg = Parameters<typeof onSelect>[0];
+    const auxArray: Data[] = [];
+    !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);
+  }, [options, setCheckedAll, onSelect]);
+
+  const onChange = React.useCallback(
+    text => setSearchArg(text),
+    [setSearchArg]
+  );
+
+  return (
+    <StyledContainerDropdown
+      lengthOptions={lengthOptions}
+      style={style}
+      anchor={anchor}
+    >
+      {type === 'multi' && (
+        <StyledContainerCheckAll
+          onClick={hideSearchBar ? onClickCheckAll : undefined}
+        >
+          <Checkbox checked={checkedAll} onChange={onClickCheckAll} />
+          {!hideSearchBar ? (
+            <SearchBarContainer>
+              <SearchInput
+                searchArg={searchArg}
+                onChange={onChange}
+                fullWidth={fullWidth}
+                placeholder={searchBarPlaceholder}
+              />
+            </SearchBarContainer>
+          ) : (
+            <StyledContainerTextLabel>
+              <Text fontWeight="bold">
+                <StyledSpan>{selectAllLabel}</StyledSpan>
+              </Text>
+            </StyledContainerTextLabel>
+          )}
+        </StyledContainerCheckAll>
+      )}
+      {type === 'single' && !hideSearchBar && (
+        <PaddedContainer>
+          <SearchInput
+            searchArg={searchArg}
+            onChange={onChange}
+            fullWidth={fullWidth}
+            placeholder={searchBarPlaceholder}
+          />
+        </PaddedContainer>
+      )}
+      <OptionsContainer lengthOptions={options.length}>
+        {(options as Data[]).map((item, index) => (
+          <ItemSelect
+            type={type}
+            key={keyExtractor(item)}
+            item={item}
+            onSelect={onSelect}
+            value={value}
+            keyExtractor={keyExtractor}
+            index={index}
+            labelExtractor={labelExtractor}
+            setDropDownVisible={setDropDownVisible}
+            checkedAll={checkedAll}
+            setCheckedAll={setCheckedAll}
+            lenghtOptions={lengthOptions}
+          />
+        ))}
+      </OptionsContainer>
+    </StyledContainerDropdown>
+  );
+};
+
+export default Dropdown;

package/src/components/molecules/Select/Dropdown/components/SearchInput.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Icon } from '@tecsinapse/react-core';
+import { Input } from '../../../../atoms/Input';
+
+const InputIcon = (
+  <Icon
+    name="magnify"
+    type="material-community"
+    size="centi"
+    style={{ marginHorizontal: 12 }}
+  />
+);
+
+const SearchInput = ({ fullWidth, searchArg, onChange, placeholder }) => {
+  return (
+    <Input
+      style={fullWidth}
+      placeholder={placeholder}
+      value={searchArg}
+      leftComponent={InputIcon}
+      onChange={onChange}
+    />
+  );
+};
+
+export default React.memo(SearchInput);

package/src/components/molecules/Select/Dropdown/components/index.ts

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

package/src/components/molecules/Select/Dropdown/index.ts

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

package/src/components/molecules/Select/Dropdown/styled.ts

@@ -0,0 +1,102 @@
+import styled from '@emotion/styled';
+import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
+import { SelectProps } from '../Select';
+import { css } from '@emotion/react';
+
+type InjectedProps = Partial<
+  StyleProps &
+    SelectProps<unknown, 'single' | 'multi'> & { lengthOptions: number }
+>;
+
+const anchorBottom = ({
+  theme,
+  anchor,
+}: StyleProps & Omit<InjectedProps, 'theme'>) =>
+  anchor === 'bottom' &&
+  css`
+    margin-top: ${theme.spacing.centi};
+    top: 100%;
+  `;
+
+const anchorTop = ({
+  theme,
+  anchor,
+}: StyleProps & Omit<InjectedProps, 'theme'>) =>
+  anchor === 'top' &&
+  css`
+    margin-bottom: ${theme.spacing.centi};
+    bottom: 100%;
+  `;
+
+export const StyledContainerDropdown = styled('div')<InjectedProps>`
+  width: 100%;
+  background-color: ${({ theme }: StyleProps) =>
+    theme.miscellaneous.surfaceColor};
+  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};
+  box-shadow: 0 2px 8px
+    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
+  position: absolute;
+  padding-top: ${({
+    theme,
+    hideSearchBar,
+  }: StyleProps & Partial<SelectProps<unknown, 'single' | 'multi'>>) =>
+    !hideSearchBar ? `${theme.spacing.deca}` : '0px'};
+  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};
+  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};
+  ${anchorTop}
+  ${anchorBottom}
+`;
+
+export const OptionsContainer = styled('div')<InjectedProps>`
+  max-height: 250px;
+  top: 100%;
+  overflow-y: ${({ lengthOptions = 0 }: InjectedProps) =>
+    lengthOptions > 5 ? 'scroll' : 'hidden'};
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: ${({ theme }: StyleProps) => theme.borderRadius.centi};
+    background-color: ${({ theme }: StyleProps) => theme.color.secondary.light};
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: ${({ theme }: StyleProps) => theme.color.primary.light};
+  },
+`;
+
+export const SearchBarContainer = styled('div')<Partial<StyleProps>>`
+  padding-left: ${({ theme }) => theme.spacing.mili};
+  width: 100%;
+`;
+
+export const PaddedContainer = styled('div')<Partial<StyleProps>>`
+  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};
+`;
+
+export const StyledContainerCheckAll = styled(PaddedContainer)<
+  Partial<StyleProps>
+>`
+  flex-direction: row;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ theme }) => theme.color.primary.xlight};
+  }
+  &:hover span {
+    color: ${({ theme }) => theme.color.primary.medium};
+  }
+`;
+
+export const StyledSpan = styled('span')<Partial<StyleProps>>`
+  color: ${({ theme }) => theme.font.color.dark};
+  padding: ${({ theme }) => `${theme.spacing.mili} 0px`};
+`;
+
+export const StyledContainerTextLabel = styled('div')<Partial<StyleProps>>`
+  padding-left: ${({ theme }) => theme.spacing.mili};
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+`;