@tecsinapse/react-web-kit 1.22.2 → 1.22.4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,202 +0,0 @@
-import { Story } from '@storybook/react';
-import React, { useState } from 'react';
-
-import { default as Select, SelectProps } from './Select';
-import styled from '@emotion/styled';
-
-export default {
-  title: 'Web/Select',
-  component: Select,
-};
-
-type Option = {
-  label: string;
-  value: string;
-};
-
-const OPTIONS_EXAMPLE: Option[] = [
-  { label: 'New York', value: 'value1' },
-  { label: 'São Paulo', value: 'value2' },
-  { label: 'Lisbon', value: 'value3' },
-  { label: 'Moscow', value: 'value4' },
-  { label: 'Sidney', value: 'value5' },
-  { label: 'Rio de Janeiro', value: 'value6' },
-];
-
-const TemplateSingle: Story<SelectProps<Option, 'single'>> = ({
-  options: _options,
-  ...args
-}) => {
-  const [singleValue, setSingleValue] = useState(undefined);
-  const [options, setOptions] = useState(_options as Option[]);
-
-  const handleSelectSingleValue = React.useCallback(
-    key => setSingleValue(key),
-    [setSingleValue]
-  );
-
-  const labelExtractor = React.useCallback(item => item.label, []);
-  const keyExtractor = React.useCallback(item => String(item.value), []);
-
-  const handleSearch = React.useCallback((searchArg: string) => {
-    setOptions(
-      (_options as Option[]).filter(item =>
-        new RegExp(searchArg, 'ig').test(item.label)
-      )
-    );
-  }, []);
-
-  return (
-    <Container>
-      <ContainerSelect>
-        <Select
-          {...args}
-          options={options}
-          value={singleValue}
-          type="single"
-          onSelect={handleSelectSingleValue}
-          labelExtractor={labelExtractor}
-          keyExtractor={keyExtractor}
-          onSearch={handleSearch}
-        />
-      </ContainerSelect>
-    </Container>
-  );
-};
-
-export const Single = TemplateSingle.bind({});
-
-Single.args = {
-  placeholder: 'Placeholder do select',
-  label: 'Label',
-  options: OPTIONS_EXAMPLE,
-  hideSearchBar: false,
-};
-
-const TemplateMulti: Story<SelectProps<Option, 'multi'>> = ({
-  options: _options,
-  ...args
-}) => {
-  const [multiValue, setMultiValue] = useState([]);
-  const [options, setOptions] = useState(_options as Option[]);
-
-  const handleSelectMultipleValues = React.useCallback(
-    keys => setMultiValue(keys),
-    [setMultiValue]
-  );
-
-  const labelExtractor = React.useCallback(item => item.label, []);
-  const keyExtractor = React.useCallback(item => String(item.value), []);
-
-  const handleSearch = React.useCallback((searchArg: string) => {
-    setOptions(
-      (_options as Option[]).filter(item =>
-        new RegExp(searchArg, 'ig').test(item.label)
-      )
-    );
-  }, []);
-
-  return (
-    <Container>
-      <ContainerSelect>
-        <Select
-          {...args}
-          options={options}
-          value={multiValue}
-          type="multi"
-          onSelect={handleSelectMultipleValues}
-          labelExtractor={labelExtractor}
-          keyExtractor={keyExtractor}
-          onSearch={handleSearch}
-        />
-      </ContainerSelect>
-    </Container>
-  );
-};
-
-export const Multi = TemplateMulti.bind({});
-
-Multi.args = {
-  placeholder: 'Placeholder do select',
-  label: 'Label',
-  options: OPTIONS_EXAMPLE,
-  hideSearchBar: false,
-};
-
-const TemplateMultiLazy: Story<SelectProps<Option, 'multi'>> = ({
-  options: _options,
-  ...args
-}) => {
-  const fetchUsers = async () => {
-    return await fetch('https://jsonplaceholder.typicode.com/users', {
-      method: 'GET',
-    }).then(data => data.json());
-  };
-
-  const fetchPromise: (
-    searchInput: string | undefined
-  ) => Promise<{ value: string; label: string }[]> = React.useCallback(
-    async (searchInput: string | undefined) => {
-      const dataTest = await fetchUsers();
-      return (dataTest || [])
-        .map(item => ({
-          value: item.id,
-          label: item.name,
-        }))
-        .filter(value => {
-          if (searchInput) return value.label.includes(searchInput);
-          else return true;
-        });
-    },
-    []
-  );
-
-  const [multiValue, setMultiValue] = useState([]);
-
-  const handleSelectMultipleValues = React.useCallback(
-    keys => setMultiValue(keys),
-    [setMultiValue]
-  );
-
-  const labelExtractor = React.useCallback(item => item.label, []);
-  const keyExtractor = React.useCallback(item => String(item.value), []);
-
-  return (
-    <Container>
-      <ContainerSelect>
-        <Select
-          {...args}
-          options={fetchPromise}
-          value={multiValue}
-          type="multi"
-          onSelect={handleSelectMultipleValues}
-          labelExtractor={labelExtractor}
-          keyExtractor={keyExtractor}
-          onSearch={fetchPromise}
-        />
-      </ContainerSelect>
-    </Container>
-  );
-};
-
-export const Lazy = TemplateMultiLazy.bind({});
-
-Lazy.args = {
-  placeholder: 'Placeholder do select',
-  label: 'Label',
-  hideSearchBar: false,
-};
-
-const Container = styled('div')`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-`;
-
-const ContainerSelect = styled('div')`
-  display: flex;
-  width: 400px;
-`;