@tecsinapse/react-web-kit 1.22.2 → 1.22.4

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

@@ -1,193 +0,0 @@
-import {
-  PressableInputContainer,
-  Text,
-  TextProps,
-} from '@tecsinapse/react-core';
-import React, { useEffect, useState } from 'react';
-import { Transition } from 'react-transition-group';
-import { useClickAwayListener } from '../../../hooks';
-import { defaultStyles, transition } from './animations';
-import { Dropdown } from './Dropdown';
-import { getDisplayValue } from './functions';
-import {
-  RightComponent,
-  StyledContainer,
-  StyledInputContainer,
-} from './styled';
-
-export interface SelectProps<Data, Type extends 'single' | 'multi'>
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-  options: ((searchInput?: string) => Promise<Data[]>) | Data[];
-  onSelect: (
-    option: Type extends 'single' ? Data | undefined : Data[]
-  ) => never | void;
-  value: Type extends 'single' ? Data | undefined : Data[];
-  type: Type;
-  keyExtractor: (t: Data, index?: number) => string;
-  labelExtractor: (t: Data) => string;
-  placeholder?: string;
-  onSearch?:
-    | ((searchArg: string) => void)
-    | ((searchInput?: string) => Promise<Data[]>)
-    | never;
-  searchBarPlaceholder?: string;
-  hideSearchBar?: boolean;
-  selectAllLabel?: string;
-  disabled?: boolean;
-  label?: string;
-  anchor?: 'top' | 'bottom';
-  displayTextProps?: TextProps;
-}
-
-/** NOTE: For better performance, you should memoize options and handlers */
-const Select = <Data, Type extends 'single' | 'multi'>({
-  value,
-  options,
-  keyExtractor,
-  onSelect,
-  type,
-  labelExtractor,
-  placeholder,
-  onSearch,
-  searchBarPlaceholder = 'Busque a opção desejada',
-  hideSearchBar = true,
-  label,
-  disabled = false,
-  anchor = 'bottom',
-  displayTextProps,
-  selectAllLabel = 'Selecionar todos',
-  ...rest
-}: SelectProps<Data, Type>): JSX.Element => {
-  const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);
-  const [selectOptions, setSelectOptions] = useState<Data[]>([]);
-  const refDropDown = React.useRef(null);
-  useClickAwayListener(refDropDown, setDropDownVisible);
-
-  useEffect(() => {
-    if (typeof options !== 'function') {
-      setSelectOptions(options);
-    }
-  }, [options]);
-
-  // TODO: Add Skeleton to modal height when loading is true
-
-  const onlyLabel = label && !placeholder;
-  const hasValue =
-    type === 'single' ? !!value : ((value || []) as []).length > 0;
-  const _placeholder = onlyLabel ? label : placeholder;
-  const _label = hasValue ? label : undefined;
-
-  const displayValue = getDisplayValue<Data>(
-    type,
-    value,
-    selectOptions,
-    _placeholder,
-    keyExtractor,
-    labelExtractor
-  );
-
-  const handleLazyFocus = React.useCallback(async () => {
-    if (!dropDownVisible && typeof options === 'function') {
-      try {
-        const result = await options();
-        if (result) {
-          setSelectOptions(result ?? []);
-        }
-      } catch (e) {
-        // TODO: Catch error
-      }
-    }
-  }, [options, setSelectOptions, dropDownVisible]);
-
-  const handleOnSearch = React.useCallback(
-    async (searchInput: string | undefined) => {
-      if (searchInput !== undefined && onSearch && dropDownVisible) {
-        try {
-          //TODO: Remove code duplicated below (Select in react-native-kit)
-          const result = await onSearch(searchInput);
-          if (result) {
-            if (type === 'single') {
-              if (
-                value &&
-                !result.find(
-                  v => keyExtractor(value as Data) === keyExtractor(v)
-                )
-              ) {
-                setSelectOptions([value as Data, ...result]);
-              } else setSelectOptions(result);
-            } else {
-              if ((value as Data[]).length > 0) {
-                const selectedValues =
-                  (value as Data[]).filter(
-                    v =>
-                      !result.find(
-                        current =>
-                          keyExtractor(v as Data) === keyExtractor(current)
-                      )
-                  ) || [];
-                setSelectOptions([...selectedValues, ...result]);
-              } else {
-                setSelectOptions(result);
-              }
-            }
-          }
-        } catch (e) {
-          // TODO: Catch error
-        }
-      }
-    },
-    [onSearch, value, keyExtractor, dropDownVisible, setSelectOptions]
-  );
-
-  const handlePressInput = async () => {
-    await handleLazyFocus();
-  };
-
-  const onPress = React.useCallback(
-    () => setDropDownVisible(prev => !prev),
-    [setDropDownVisible]
-  );
-
-  return (
-    <StyledContainer ref={refDropDown} {...rest}>
-      <StyledInputContainer onFocus={handlePressInput}>
-        <PressableInputContainer
-          label={_label}
-          onPress={onPress}
-          disabled={disabled}
-          rightComponent={RightComponent}
-        >
-          <Text
-            {...displayTextProps}
-            ellipsizeMode="tail"
-            numberOfLines={1}
-            fontWeight={'bold'}
-          >
-            {displayValue}
-          </Text>
-        </PressableInputContainer>
-      </StyledInputContainer>
-      <Transition in={dropDownVisible} timeout={300}>
-        {state => (
-          <Dropdown
-            options={selectOptions ?? []}
-            onSelect={onSelect}
-            value={value}
-            type={type}
-            keyExtractor={keyExtractor}
-            labelExtractor={labelExtractor}
-            hideSearchBar={hideSearchBar}
-            searchBarPlaceholder={searchBarPlaceholder}
-            onSearch={handleOnSearch}
-            style={{ ...defaultStyles, ...transition[anchor][state] }}
-            setDropDownVisible={setDropDownVisible}
-            anchor={anchor}
-            selectAllLabel={selectAllLabel}
-          />
-        )}
-      </Transition>
-    </StyledContainer>
-  );
-};
-
-export default Select;

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

@@ -1,117 +0,0 @@
-import React from 'react';
-import { Checkbox, Text } from '@tecsinapse/react-core';
-import {
-  ContainerItemSelect,
-  StyledContainerTextLabel,
-  StyledSpan,
-} from './styled';
-
-interface SelectItemProps<Data, Type extends 'single' | 'multi'> {
-  item: Data;
-  type: Type;
-  value: Type extends 'single' ? Data | undefined : Data[];
-  onSelect: (
-    option: Type extends 'single' ? Data | undefined : Data[]
-  ) => never | void;
-  keyExtractor: (t: Data, index?: number) => string;
-  labelExtractor: (t: Data) => string;
-  index: number;
-}
-
-const SelectItem = <Data, Type extends 'single' | 'multi'>({
-  item,
-  onSelect,
-  type,
-  value,
-  labelExtractor,
-  setDropDownVisible,
-  checkedAll,
-  setCheckedAll,
-  lenghtOptions,
-  keyExtractor,
-}: SelectItemProps<Data, Type> & {
-  setDropDownVisible: (t: boolean) => void;
-  checkedAll: boolean;
-  setCheckedAll: (t: boolean) => void;
-  lenghtOptions: number;
-}): JSX.Element => {
-  const isMulti = type === 'multi';
-  const [checked, setChecked] = React.useState<boolean>(
-    value !== undefined &&
-      type === 'multi' &&
-      (value as Data[]).find(
-        data => keyExtractor(data) === keyExtractor(item)
-      ) !== undefined
-  );
-
-  React.useEffect(() => {
-    if (
-      !checked &&
-      value !== undefined &&
-      ((type === 'multi' &&
-        (value as Data[]).find(
-          data => keyExtractor(data) === keyExtractor(item)
-        )) ||
-        (type === 'single' &&
-          keyExtractor(value as Data) === keyExtractor(item)))
-    )
-      setChecked(true);
-  }, [value, keyExtractor, type]);
-
-  React.useEffect(() => {
-    if (type === 'multi') {
-      checkedAll
-        ? setChecked(true)
-        : setChecked(
-            (value as Data[]).find(
-              data => keyExtractor(data) === keyExtractor(item)
-            ) !== undefined
-          );
-    }
-  }, [checkedAll]);
-
-  const clickItem = React.useCallback(
-    (item, _value) => {
-      // TS Workaround since TS won't infer the ternary operator's result type correctly
-      type OnSelectArg = Parameters<typeof onSelect>[0];
-      const key: Data = item;
-      if (Array.isArray(_value)) {
-        const auxChecked = !checked;
-        setChecked(!checked);
-        if (auxChecked) {
-          onSelect([..._value, key] as OnSelectArg);
-          [..._value, key].length === lenghtOptions && setCheckedAll(true);
-        } else {
-          const auxArray: Data[] = [..._value];
-          const indexToExclude = auxArray.findIndex(
-            data => keyExtractor(data) === keyExtractor(key)
-          );
-          auxArray.splice(indexToExclude, 1);
-          onSelect([...auxArray] as OnSelectArg);
-          setCheckedAll(false);
-        }
-      } else {
-        onSelect(key as OnSelectArg);
-        setDropDownVisible(false);
-      }
-    },
-    [onSelect, setDropDownVisible, setCheckedAll, setChecked, checked]
-  );
-
-  return (
-    <ContainerItemSelect onClick={() => clickItem(item, value)}>
-      {isMulti && (
-        <Checkbox checked={checked} onChange={() => clickItem(item, value)} />
-      )}
-      <StyledContainerTextLabel>
-        <Text fontWeight="bold" ellipsizeMode="tail" numberOfLines={1}>
-          <StyledSpan singleHighligh={type === 'single' && value === item}>
-            {labelExtractor(item)}
-          </StyledSpan>
-        </Text>
-      </StyledContainerTextLabel>
-    </ContainerItemSelect>
-  );
-};
-
-export default React.memo(SelectItem) as typeof SelectItem;

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

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

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

@@ -1,34 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-
-export const ContainerItemSelect = styled('div')<Partial<StyleProps>>`
-  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};
-  cursor: pointer;
-  &:hover {
-    background-color: ${({ theme }) => theme.color.primary.xlight};
-  }
-  &:hover span {
-    color: ${({ theme }) => theme.color.primary.medium};
-  }
-  flex-direction: row;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-export const StyledSpan = styled('span')<
-  Partial<StyleProps> & { singleHighligh: boolean }
->`
-  color: ${({ theme, singleHighligh }) =>
-    singleHighligh ? theme.color.primary.medium : theme.color.secondary.xdark};
-  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;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;

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

@@ -1,42 +0,0 @@
-export const defaultStyles = {
-  transition: [
-    'transform 200ms ease-in-out, opacity 200ms ease-in-out, visibility 200ms ease-in-out',
-  ],
-  overflow: 'hidden',
-  visibility: 'hidden',
-};
-
-export const transition = {
-  bottom: {
-    entering: {
-      transform: 'translateY(-10%)',
-      opacity: 0,
-      visibility: 'hidden',
-    },
-    entered: {
-      transform: 'translateY(0%)',
-      opacity: 1,
-      visibility: 'visible',
-    },
-    exiting: {
-      transform: 'translateY(0%)',
-      opacity: 1,
-      visibility: 'visible',
-    },
-    exited: {
-      transform: 'translateY(-10%)',
-      opacity: 0,
-      visibility: 'hidden',
-    },
-  },
-  top: {
-    entering: {
-      transform: 'translateY(10%)',
-      opacity: 0,
-      visibility: 'hidden',
-    },
-    entered: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },
-    exiting: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },
-    exited: { transform: 'translateY(10%)', opacity: 0, visibility: 'hidden' },
-  },
-};

package/src/components/molecules/Select/functions.ts

@@ -1,24 +0,0 @@
-export const getDisplayValue = <Data>(
-  type: 'multi' | 'single',
-  value: Data | Data[] | undefined,
-  options: Data[],
-  placeholder: string | undefined,
-  keyExtractor: (option: Data, idx?: number) => string,
-  labelExtractor: (option: Data) => string
-): Data | Data[] | string | undefined => {
-  if (type === 'multi') {
-    if ((value as Data[]).length === 0) return placeholder;
-    else {
-      return (value as Data[])
-        .reduce((acc, option) => acc + labelExtractor(option) + ', ', '')
-        .slice(0, -2);
-    }
-  } else {
-    if (value === undefined) return placeholder;
-    const selectedOption = options.find(
-      (option, index) =>
-        keyExtractor(option, index) == keyExtractor(value as Data, index)
-    );
-    return selectedOption ? labelExtractor(selectedOption) : placeholder;
-  }
-};

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

@@ -1,2 +0,0 @@
-export { default as Select } from './Select';
-export type { SelectProps } from './Select';

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

@@ -1,25 +0,0 @@
-import styled from '@emotion/styled';
-import { Icon, StyleProps } from '@tecsinapse/react-core';
-import React from 'react';
-
-export const StyledContainer = styled('div')<Partial<StyleProps>>`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-`;
-
-export const StyledInputContainer = styled('div')<Partial<StyleProps>>`
-  width: 100%;
-`;
-
-export const RightComponent = (
-  <Icon
-    name="chevron-down"
-    type="material-community"
-    size="centi"
-    style={{ marginRight: 12 }}
-  />
-);

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

@@ -1,64 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import { default as Snackbar, SnackbarWebProps } from './Snackbar';
-
-export default {
-  title: 'Hybrid/Snackbar',
-  component: Snackbar,
-};
-
-const Template: Story<SnackbarWebProps> = ({ open: _open, ...args }) => {
-  const [open, isOpen] = React.useState(_open);
-
-  React.useEffect(() => {
-    isOpen(_open);
-  }, [_open]);
-
-  return <Snackbar {...args} open={open} onClose={() => isOpen(false)} />;
-};
-
-export const Base = Template.bind({});
-export const Timeout = Template.bind({});
-
-Base.args = {
-  value: 'Enviado com sucesso!',
-  dismissable: true,
-  colorVariant: 'success',
-  colorTone: 'xlight',
-  textProps: {
-    colorVariant: 'success',
-    colorTone: 'medium',
-  },
-  leftIcon: {
-    name: 'alert-circle-outline',
-    type: 'material-community',
-    colorVariant: 'success',
-    colorTone: 'medium',
-  },
-  rightIcon: {
-    colorTone: 'medium',
-    colorVariant: 'success',
-  },
-};
-
-Timeout.args = {
-  value: 'Falha no envio!',
-  dismissable: true,
-  timeout: 5000,
-  colorVariant: 'error',
-  colorTone: 'xlight',
-  textProps: {
-    colorVariant: 'error',
-    colorTone: 'medium',
-  },
-  leftIcon: {
-    name: 'alert-circle-outline',
-    type: 'material-community',
-    colorVariant: 'error',
-    colorTone: 'medium',
-  },
-  rightIcon: {
-    colorTone: 'medium',
-    colorVariant: 'error',
-  },
-};

package/src/components/molecules/Snackbar/Snackbar.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import {
-  SnackbarProps as SnackPropsCore,
-  Text,
-  TextProps,
-} from '@tecsinapse/react-core';
-import { SnackbarStyled } from './styled';
-
-export interface SnackbarWebProps extends Omit<SnackPropsCore, 'children'> {
-  value: string;
-  textProps?: TextProps;
-}
-
-const Snackbar: React.FC<SnackbarWebProps> = ({
-  value,
-  textProps = { colorVariant: 'primary', colorTone: 'medium' },
-  ...rest
-}) => {
-  return (
-    <SnackbarStyled {...rest}>
-      <Text {...textProps} fontWeight="bold" typography="base">
-        {value}
-      </Text>
-    </SnackbarStyled>
-  );
-};
-
-export default Snackbar;

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

@@ -1,2 +0,0 @@
-export { default as Snackbar } from './Snackbar';
-export type { SnackbarWebProps } from './Snackbar';

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

@@ -1,23 +0,0 @@
-import styled, { css } from '@emotion/native';
-import { Snackbar as SnackbarCore, StyleProps } from '@tecsinapse/react-core';
-
-const baseStyles = () => [
-  css({
-    left: '50%',
-    maxWidth: '600px',
-    transform: [{ translateX: '-50%' as any }],
-  }),
-];
-
-const webStyles = () => [
-  css`
-    position: fixed;
-  `,
-];
-
-export const SnackbarStyled = styled(SnackbarCore)<Partial<StyleProps>>(
-  () => css`
-    ${baseStyles()}
-    ${webStyles()}
-  `
-);

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import TextArea, { TextAreaProps } from './TextArea';
-
-export default {
-  title: 'Hybrid/Text Area',
-  component: TextArea,
-};
-
-const Template: Story<TextAreaProps> = ({ value: _value, ...args }) => {
-  const [value, setValue] = React.useState(_value);
-  return <TextArea {...args} value={value} onChange={arg => setValue(arg)} />;
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  value:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar leo vel est egestas laoreet. Nam facilisis, dui vitae convallis convallis, erat felis ornare massa, non auctor libero tortor eu nisi.',
-  numberOfLines: 3,
-  maxLength: 255,
-  label: 'Label',
-  placeholder: 'Placeholder',
-};

package/src/components/molecules/TextArea/TextArea.tsx

@@ -1,85 +0,0 @@
-import React, { FC } from 'react';
-import {
-  useInputFocus,
-  TextAreaProps as ITACore,
-  TextArea as TACore,
-  Text,
-} from '@tecsinapse/react-core';
-import { StyledWebInput } from './styled';
-
-export type TextAreaProps = Omit<ITACore, 'TextComponent' | 'focused'>;
-
-const TextArea: FC<TextAreaProps> = ({
-  label,
-  labelColor,
-  labelColorVariant,
-  labelColorTone,
-  labelTypography,
-  labelStack,
-  labelWeight,
-  leftComponent,
-  rightComponent,
-  disabled,
-  style,
-  borderColor,
-  borderColorGradation,
-  inputFontStack = 'default',
-  inputFontWeight = 'bold',
-  inputContainerStyle,
-  variant = 'default',
-  hintComponent,
-  hint,
-  onFocus,
-  onBlur,
-  value,
-  maxLength,
-  ...rest
-}) => {
-  const { focused, handleBlur, handleFocus } = useInputFocus(
-    onFocus,
-    onBlur,
-    !disabled
-  );
-
-  return (
-    <TACore
-      label={label}
-      labelColor={labelColor}
-      labelColorVariant={labelColorVariant}
-      labelColorTone={labelColorTone}
-      labelTypography={labelTypography}
-      labelStack={labelStack}
-      labelWeight={labelWeight}
-      LabelComponent={Text}
-      leftComponent={leftComponent}
-      rightComponent={rightComponent}
-      borderColor={borderColor}
-      borderColorGradation={borderColorGradation}
-      inputContainerStyle={inputContainerStyle}
-      focused={focused}
-      disabled={disabled}
-      variant={variant}
-      value={value}
-      hintComponent={hintComponent}
-      hint={hint}
-      style={style}
-      TextComponent={Text}
-      maxLength={maxLength}
-    >
-      <StyledWebInput
-        {...rest}
-        fontStack={inputFontStack}
-        fontWeight={inputFontWeight}
-        disabled={disabled}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        textAlignVertical={'top'}
-        multiline
-        value={value}
-        maxLength={maxLength}
-      />
-    </TACore>
-  );
-};
-
-export default TextArea;

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

@@ -1,2 +0,0 @@
-export { default as TextArea } from './TextArea';
-export type { TextAreaProps } from './TextArea';