@tecsinapse/react-web-kit 1.22.1 → 1.22.3

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';

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

@@ -1,23 +0,0 @@
-import styled from '@emotion/native';
-import {
-  FontStackType,
-  FontWeightType,
-  StyleProps,
-  TextAreaInputBase,
-} from '@tecsinapse/react-core';
-import { TextAreaProps } from './TextArea';
-
-interface Font {
-  fontStack?: FontStackType;
-  fontWeight?: FontWeightType;
-}
-
-export const StyledWebInput = styled(TextAreaInputBase)<
-  Font & Partial<TextAreaProps> & Partial<StyleProps>
->`
-  font-weight: ${({ theme, fontWeight = 'regular' }) =>
-    theme.font.weight[fontWeight]};
-  font-family: ${({ theme, fontStack = 'default' }) =>
-    `'${theme.font.stack[fontStack]}'`};
-  outline-width: 0;
-`;