@tecsinapse/react-web-kit 1.22.2 → 1.22.3

package/src/components/atoms/Button/Button.tsx

@@ -1,61 +0,0 @@
-import { ButtonProps } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { useMouseHover } from './hooks/useMouseHover';
-import { useMousePressed } from './hooks/useMousePressed';
-import { StyledWebButton } from './styled';
-
-/**
- * TODO: Add a property 'defaultElement' to render a default
- * component and provide some button's state to it.
- */
-export type WebButtonProps = ButtonProps & {
-  onMouseOver?: () => void;
-  onMouseOut?: () => void;
-  onPressIn?: () => void;
-  onPressOut?: () => void;
-};
-
-const Button: FC<WebButtonProps> = ({
-  children,
-  disabled,
-  frozen,
-  state,
-  variant,
-  onMouseOut,
-  onMouseOver,
-  onPressIn,
-  onPressOut,
-  ...rest
-}): JSX.Element => {
-  const _frozen = frozen || state === 'loading';
-  const { mouseOver, handleMouseOut, handleMouseOver } = useMouseHover(
-    !disabled && !_frozen,
-    onMouseOut,
-    onMouseOver
-  );
-  const { pressed, handlePressIn, handlePressOut } = useMousePressed(
-    !disabled && !_frozen,
-    onPressIn,
-    onPressOut
-  );
-
-  return (
-    <StyledWebButton
-      {...rest}
-      disabled={disabled}
-      frozen={_frozen}
-      state={state}
-      onMouseOver={handleMouseOver}
-      onMouseOut={handleMouseOut}
-      mouseOver={mouseOver}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      pressed={pressed}
-      variant={variant}
-    >
-      {children}
-    </StyledWebButton>
-  );
-};
-
-export default Button;

package/src/components/atoms/Button/hooks/useMouseHover.ts

@@ -1,29 +0,0 @@
-import { useCallback, useState } from 'react';
-
-export const useMouseHover = (
-  active: boolean,
-  onMouseOver?: () => void,
-  onMouseOut?: () => void
-) => {
-  const [mouseOver, setMouseOver] = useState<boolean>(false);
-
-  const handleMouseOver = useCallback(() => {
-    if (active) {
-      setMouseOver(true);
-      onMouseOver?.();
-    }
-  }, [active, setMouseOver]);
-
-  const handleMouseOut = useCallback(() => {
-    if (active) {
-      setMouseOver(false);
-      onMouseOut?.();
-    }
-  }, [active, setMouseOver]);
-
-  return {
-    mouseOver,
-    handleMouseOver,
-    handleMouseOut,
-  };
-};

package/src/components/atoms/Button/hooks/useMousePressed.ts

@@ -1,29 +0,0 @@
-import { useCallback, useState } from 'react';
-
-export const useMousePressed = (
-  active: boolean,
-  onPressIn?: () => void,
-  onPressOut?: () => void
-) => {
-  const [pressed, setPressed] = useState<boolean>(false);
-
-  const handlePressIn = useCallback(() => {
-    if (active) {
-      setPressed(true);
-      onPressIn?.();
-    }
-  }, [active, setPressed]);
-
-  const handlePressOut = useCallback(() => {
-    if (active) {
-      setPressed(false);
-      onPressOut?.();
-    }
-  }, [active, setPressed]);
-
-  return {
-    pressed,
-    handlePressIn,
-    handlePressOut,
-  };
-};

package/src/components/atoms/Button/index.ts

@@ -1,3 +0,0 @@
-export { default as Button } from './Button';
-export type { WebButtonProps } from './Button';
-export * from './hooks/useMouseHover';

package/src/components/atoms/Button/styled.ts

@@ -1,48 +0,0 @@
-import styled, { css } from '@emotion/native';
-import {
-  borderColorGradationVC,
-  borderColorVC,
-  Button,
-  colorGradationVC,
-  colorVC,
-  StyleProps,
-} from '@tecsinapse/react-core';
-import { WebButtonProps } from './Button';
-
-const webStyles = () => {
-  return css`
-    & * {
-      user-select: none;
-    }
-  `;
-};
-
-const hoverStyles = ({
-  mouseOver,
-  pressed,
-  theme,
-  variant = 'filled',
-  disabled,
-}: { mouseOver: boolean; pressed: boolean } & WebButtonProps &
-  Partial<StyleProps>) => {
-  const variantColor = colorVC[variant];
-  const variantColorGradation = colorGradationVC[variant];
-  const variantBorderColor = borderColorVC[variant];
-  const variantBorderColorGradation = borderColorGradationVC[variant];
-  return (
-    mouseOver &&
-    !disabled &&
-    !pressed &&
-    css`
-      background-color: ${theme?.color[variantColor][variantColorGradation]};
-      border-color: ${theme?.color[variantBorderColor][
-        variantBorderColorGradation
-      ]};
-    `
-  );
-};
-
-export const StyledWebButton = styled(Button)<
-  { mouseOver: boolean; pressed: boolean } & WebButtonProps &
-    Partial<StyleProps>
->(webStyles, hoverStyles);

package/src/components/atoms/Dropdown/index.tsx

@@ -1,34 +0,0 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import { StyledContainerDropdown } from './styled';
-import { Transition } from 'react-transition-group';
-import { defaultStyles, transition } from '../../molecules/Select/animations';
-import { useClickAwayListener } from '../../../hooks';
-
-export interface DropdownProps {
-  visible: boolean;
-  setVisible: Dispatch<SetStateAction<boolean>>;
-}
-
-const Component: React.FC<DropdownProps & { children: JSX.Element }> = ({
-  visible,
-  setVisible,
-  children,
-}): JSX.Element => {
-  const refDropDown = React.useRef(null);
-  useClickAwayListener(refDropDown, setVisible);
-
-  return (
-    <Transition in={visible} timeout={300}>
-      {state => (
-        <StyledContainerDropdown
-          style={{ ...defaultStyles, ...transition['bottom'][state] }}
-          ref={refDropDown}
-        >
-          {children}
-        </StyledContainerDropdown>
-      )}
-    </Transition>
-  );
-};
-
-export const Dropdown = Component;

package/src/components/atoms/Dropdown/styled.ts

@@ -1,15 +0,0 @@
-import styled from '@emotion/styled';
-import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
-
-export const StyledContainerDropdown = styled('div')<Partial<StyleProps>>`
-  width: auto;
-  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-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};
-  margin-top: 8px;
-  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};
-`;

package/src/components/atoms/Input/Input.stories.tsx

@@ -1,39 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react';
-import React, { useState } from 'react';
-import Input, { InputWebProps } from './Input';
-
-export default {
-  title: 'Hybrid/Input',
-  component: Input,
-};
-
-const Template: Story<InputWebProps> = args => {
-  const [value, setValue] = useState<string>('');
-
-  const onChange = text => {
-    setValue(text);
-    if (args.onChange) {
-      args.onChange(text);
-    }
-  };
-
-  return (
-    <Input
-      {...args}
-      label={args.label}
-      value={value}
-      onChange={onChange}
-      placeholder={args.placeholder}
-    />
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  onChange: value => action('onChange')(value),
-  placeholder: 'Type your e-mail',
-  disabled: false,
-  label: 'Login',
-};

package/src/components/atoms/Input/Input.tsx

@@ -1,89 +0,0 @@
-import {
-  Hint,
-  InputContainer,
-  InputContainerProps,
-  InputElementProps,
-  useInputFocus,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { TextInput, View } from 'react-native';
-import { StyledWebTextInput } from './styled';
-
-export type InputWebProps = Omit<InputElementProps, 'style'> &
-  InputContainerProps & { ref?: React.Ref<HTMLInputElement | undefined> };
-
-const Input: FC<InputWebProps> = React.forwardRef(
-  (
-    {
-      label,
-      labelColor,
-      labelColorVariant,
-      labelColorTone,
-      labelTypography,
-      labelStack,
-      labelWeight,
-      leftComponent,
-      rightComponent,
-      disabled,
-      style,
-      borderColor,
-      borderColorGradation,
-      inputContainerStyle,
-      variant = 'default',
-      hintComponent,
-      hint,
-      onFocus,
-      onBlur,
-      placeholder,
-      value,
-      ...rest
-    },
-    ref
-  ) => {
-    const _hint = hintComponent || <Hint text={hint} variant={variant} />;
-    const { focused, handleBlur, handleFocus } = useInputFocus(
-      onFocus,
-      onBlur,
-      !disabled
-    );
-
-    const onlyLabel = label && !placeholder;
-
-    return (
-      <View style={style}>
-        <InputContainer
-          label={value ? label : undefined}
-          labelColor={labelColor}
-          labelColorVariant={labelColorVariant}
-          labelColorTone={labelColorTone}
-          labelTypography={labelTypography}
-          labelStack={labelStack}
-          labelWeight={labelWeight}
-          leftComponent={leftComponent}
-          rightComponent={rightComponent}
-          borderColor={borderColor}
-          borderColorGradation={borderColorGradation}
-          inputContainerStyle={inputContainerStyle}
-          focused={focused}
-          disabled={disabled}
-          variant={variant}
-        >
-          <StyledWebTextInput
-            {...rest}
-            placeholder={onlyLabel ? label : placeholder}
-            value={value}
-            ref={ref as React.Ref<TextInput>}
-            disabled={disabled}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-        </InputContainer>
-        {hint && _hint}
-      </View>
-    );
-  }
-);
-
-Input.displayName = 'Input';
-
-export default Input;

package/src/components/atoms/Input/index.ts

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

package/src/components/atoms/Input/styled.ts

@@ -1,8 +0,0 @@
-import styled from '@emotion/native';
-import { InputElement, StyleProps } from '@tecsinapse/react-core';
-
-export const StyledWebTextInput = styled(InputElement)<Partial<StyleProps>>`
-  &:focus-visible {
-    outline-width: 0;
-  }
-`;

package/src/components/atoms/InputMask/InputMask.stories.tsx

@@ -1,80 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react';
-import React, { useState } from 'react';
-import InputMask, { InputMaskWebProps } from './InputMask';
-import { Masks } from '@tecsinapse/react-core/src';
-import { CurrencyOptions } from '@tecsinapse/react-core/dist/components/atoms/Input';
-
-export default {
-  title: 'Hybrid/InputMask',
-  component: InputMask,
-};
-
-const TemplateStringMask: Story<InputMaskWebProps> = args => {
-  const [value, setValue] = useState<string>();
-
-  const onChange = text => {
-    setValue(text);
-    if (args.onChange) {
-      args.onChange(text);
-    }
-  };
-
-  return (
-    <InputMask
-      {...args}
-      label={args.label}
-      value={value}
-      onChange={onChange}
-      placeholder={args.placeholder}
-      mask={Masks.COMBINED_PHONE}
-    />
-  );
-};
-
-export const StringMask = TemplateStringMask.bind({});
-
-StringMask.args = {
-  onChange: value => action('onChange')(value),
-  placeholder: 'Type your phone',
-  disabled: false,
-  label: 'Phone',
-};
-
-const TemplateNumberMask: Story<InputMaskWebProps> = args => {
-  const [value, setValue] = useState<number>(1200.2);
-
-  const onChange = text => {
-    setValue(text);
-    if (args.onChange) {
-      args.onChange(text);
-    }
-  };
-
-  const numberMaskExample: CurrencyOptions = {
-    symbol: 'R$ ',
-    separator: '.',
-    decimal: ',',
-    precision: 2,
-  };
-
-  return (
-    <InputMask
-      {...args}
-      label={args.label}
-      value={value}
-      onChange={onChange}
-      placeholder={args.placeholder}
-      mask={numberMaskExample}
-    />
-  );
-};
-
-export const NumberMask = TemplateNumberMask.bind({});
-
-NumberMask.args = {
-  onChange: value => action('onChange')(value),
-  placeholder: 'Type the price in R$',
-  disabled: false,
-  label: 'Price',
-};

package/src/components/atoms/InputMask/InputMask.tsx

@@ -1,89 +0,0 @@
-import {
-  Hint,
-  InputContainer,
-  InputContainerProps,
-  InputMaskElementProps,
-  useInputFocus,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { TextInput, View } from 'react-native';
-import { StyledWebTextInputMask } from './styled';
-
-export type InputMaskWebProps = Omit<InputMaskElementProps, 'style'> &
-  InputContainerProps & { ref?: React.Ref<HTMLInputElement | undefined> };
-
-const InputMask: FC<InputMaskWebProps> = React.forwardRef(
-  (
-    {
-      label,
-      labelColor,
-      labelColorVariant,
-      labelColorTone,
-      labelTypography,
-      labelStack,
-      labelWeight,
-      leftComponent,
-      rightComponent,
-      disabled,
-      style,
-      borderColor,
-      borderColorGradation,
-      inputContainerStyle,
-      variant = 'default',
-      hintComponent,
-      hint,
-      onFocus,
-      onBlur,
-      value,
-      placeholder,
-      ...rest
-    },
-    ref
-  ) => {
-    const _hint = hintComponent || <Hint text={hint} variant={variant} />;
-    const { focused, handleBlur, handleFocus } = useInputFocus(
-      onFocus,
-      onBlur,
-      !disabled
-    );
-
-    const onlyLabel = label && !placeholder;
-
-    return (
-      <View style={style}>
-        <InputContainer
-          label={String(value) ? label : undefined}
-          labelColor={labelColor}
-          labelColorVariant={labelColorVariant}
-          labelColorTone={labelColorTone}
-          labelTypography={labelTypography}
-          labelStack={labelStack}
-          labelWeight={labelWeight}
-          leftComponent={leftComponent}
-          rightComponent={rightComponent}
-          borderColor={borderColor}
-          borderColorGradation={borderColorGradation}
-          inputContainerStyle={inputContainerStyle}
-          focused={focused}
-          disabled={disabled}
-          variant={variant}
-        >
-          <StyledWebTextInputMask
-            {...rest}
-            placeholder={onlyLabel ? label : placeholder}
-            value={value}
-            ref={ref as React.Ref<TextInput>}
-            disabled={disabled}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-        </InputContainer>
-        {hint && _hint}
-      </View>
-    );
-  }
-);
-
-InputMask.displayName = 'InputMask';
-
-export default InputMask;

package/src/components/atoms/InputMask/index.ts

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

package/src/components/atoms/InputMask/styled.ts

@@ -1,10 +0,0 @@
-import styled from '@emotion/native';
-import { InputMaskElement, StyleProps } from '@tecsinapse/react-core';
-
-export const StyledWebTextInputMask = styled(InputMaskElement)<
-  Partial<StyleProps>
->`
-  &:focus-visible {
-    outline-width: 0;
-  }
-`;

package/src/components/atoms/Modal/Modal.stories.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import { Text } from '@tecsinapse/react-core';
-import Modal, { ModalProps } from './Modal';
-import { Button } from '../Button';
-
-export default {
-  title: 'Web/Modal',
-  component: Modal,
-};
-
-const Template: Story<ModalProps> = ({ open: _open, ...args }) => {
-  const [open, setOpen] = React.useState(_open);
-
-  React.useEffect(() => setOpen(_open), [_open]);
-
-  const toggleOpen = () => setOpen(state => !state);
-
-  return (
-    <>
-      <Modal {...args} onClose={toggleOpen} open={open}>
-        <div
-          style={{
-            width: 350,
-            height: 200,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Text colorVariant="primary" typography="h3" colorTone="dark">
-            Are you sure?
-          </Text>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis
-            lorem sed felis pretium posuere quis ut quam. Nunc at mi quis urna
-            maximus feugiat id et neque. Nunc sit amet leo magna. Quisque eu
-            risus interdum, sagittis neque nec, ultrices ex.
-          </Text>
-          <Button onPress={toggleOpen}>
-            <Text fontColor="light">Close Modal</Text>
-          </Button>
-        </div>
-      </Modal>
-      <Button onPress={toggleOpen}>
-        <Text fontColor="light">Open Modal</Text>
-      </Button>
-    </>
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = { open: true };

package/src/components/atoms/Modal/Modal.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Transition } from 'react-transition-group';
-import { Overlay } from '../Overlay';
-import { ModalContainer } from './styled';
-import { defaultStyleOverlay, transitionStylesOverlay } from './animations';
-
-export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
-  open: boolean;
-  onClose: () => void;
-}
-
-const Modal: React.FC<ModalProps> = ({
-  children,
-  open,
-  onClose,
-  style,
-  ...rest
-}) => {
-  return (
-    <>
-      <Overlay open={open} onClose={onClose} zIndex="modal" />
-      <Transition in={open} timeout={400}>
-        {state => (
-          <ModalContainer
-            style={{
-              ...style,
-              ...defaultStyleOverlay,
-              ...transitionStylesOverlay[state],
-            }}
-            {...rest}
-          >
-            {children}
-          </ModalContainer>
-        )}
-      </Transition>
-    </>
-  );
-};
-
-export default Modal;

package/src/components/atoms/Modal/animations.ts

@@ -1,12 +0,0 @@
-export const defaultStyleOverlay = {
-  transition: `opacity 800ms ease-in-out, visibility 600ms ease-in-out`,
-  opacity: 0,
-  visibility: 'hidden',
-};
-
-export const transitionStylesOverlay = {
-  entering: { opacity: 1, visibility: 'visible' },
-  entered: { opacity: 1, visibility: 'visible' },
-  exiting: { opacity: 0, visibility: 'visible' },
-  exited: { opacity: 0, visibility: 'hidden' },
-};

package/src/components/atoms/Modal/index.ts

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

package/src/components/atoms/Modal/styled.ts

@@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
-
-export const ModalContainer = styled('div')<Partial<StyleProps>>`
-  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-  margin: auto;
-  position: fixed;
-  z-index: ${({ theme }) => theme.zIndex.modal};
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: ${({ theme }) => theme.borderRadius.micro};
-  padding: ${({ theme }) => theme.spacing.kilo};
-  display: flex;
-  box-shadow: 0 2px 8px
-    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
-`;