@tecsinapse/react-web-kit 1.22.0 → 1.22.1-beta.2

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)};
-`;

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

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

@@ -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/Overlay/index.ts

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

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

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

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

@@ -1,38 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import Skeleton from './Skeleton';
-import { SkeletonProps } from './Skeleton';
-import { Text, Card } from '@tecsinapse/react-web-kit';
-
-export default {
-  title: 'Web/Skeleton',
-  component: Skeleton,
-};
-
-const Template: Story<SkeletonProps> = args => <Skeleton {...args} />;
-
-export const Base = Template.bind({});
-
-Base.args = { width: 100, height: 50 };
-
-const ChildrenTemplate: Story<SkeletonProps> = args => {
-  return (
-    <Skeleton {...args}>
-      <Card
-        elevated
-        style={{
-          height: '100px',
-          width: '200px',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Text>Skeleton card!</Text>
-      </Card>
-    </Skeleton>
-  );
-};
-
-export const Children = ChildrenTemplate.bind({});
-
-Children.args = { animation: 'pulse' };

package/src/components/atoms/Skeleton/Skeleton.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Wrapper } from './styled';
-import { BorderRadiusType } from '@tecsinapse/react-core';
-import { View } from 'react-native';
-
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-  width?: number;
-  height?: number;
-  animation?: 'pulse' | 'wave';
-  active?: boolean;
-  radius?: BorderRadiusType;
-}
-
-const Skeleton: React.FC<SkeletonProps> = ({
-  children,
-  width,
-  height,
-  animation = 'wave',
-  active = true,
-  radius,
-  ...rest
-}) => {
-  if (!width && !height && !children) {
-    throw new Error(
-      '[Skeleton] You should provide children or specify width and height'
-    );
-  }
-
-  return (
-    <Wrapper
-      width={width}
-      height={height}
-      animation={animation}
-      active={active}
-      radius={radius}
-      {...rest}
-    >
-      <View
-        style={{ opacity: active ? 0 : 1 }}
-        pointerEvents={active ? 'none' : 'auto'}
-      >
-        {children}
-      </View>
-    </Wrapper>
-  );
-};
-
-export default Skeleton;

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

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