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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+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)};
+`;

package/src/components/atoms/Overlay/Overlay.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Transition } from 'react-transition-group';
+import { ZIndex } from '@tecsinapse/react-core';
+import { defaultStyleOverlay, transitionStylesOverlay } from './animations';
+import { StyledOverlay } from './styled';
+
+export interface OverlayProps {
+  timeout?: number;
+  open: boolean;
+  onClose: () => void;
+  zIndex: keyof ZIndex;
+}
+
+const Overlay: React.FC<OverlayProps> = ({
+  timeout = 300,
+  open,
+  onClose,
+  zIndex = 'default',
+  children,
+}) => {
+  return (
+    <Transition in={open} timeout={timeout}>
+      {state => (
+        <StyledOverlay
+          style={{
+            ...defaultStyleOverlay,
+            ...transitionStylesOverlay[state],
+          }}
+          onClick={open ? onClose : undefined}
+          show={open}
+          zIndex={zIndex}
+        >
+          {children}
+        </StyledOverlay>
+      )}
+    </Transition>
+  );
+};
+
+export default Overlay;

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

@@ -0,0 +1,12 @@
+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/Overlay/index.ts

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

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

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import { hex2rgba, StyleProps, ZIndex } from '@tecsinapse/react-core';
+
+type InjectedProps = { show: boolean; zIndex: keyof ZIndex };
+
+export const StyledOverlay = styled('div')<Partial<StyleProps> & InjectedProps>`
+  background: ${({ theme }: StyleProps) =>
+    hex2rgba(theme.miscellaneous.overlay, 0.5)};
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  z-index: ${({ theme, zIndex }: StyleProps & InjectedProps) =>
+    theme.zIndex[zIndex]};
+  cursor: ${({ show }) => (show ? 'pointer' : 'default')};
+  position: fixed;
+  align-items: center;
+  justify-content: center;
+`;