@tecsinapse/react-web-kit 1.22.2 → 1.22.4

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import Accordion, { AccordionProps } from './Accordion';
-import { Text } from '@tecsinapse/react-core';
-
-export default {
-  title: 'Web/Accordion',
-  component: Accordion,
-  parameters: {
-    backgrounds: {
-      default: 'white',
-    },
-  },
-};
-
-const Template: Story<AccordionProps> = args => {
-  return (
-    <div style={{ width: 600 }}>
-      <Accordion {...args} title="Agreement terms">
-        <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>
-      </Accordion>
-    </div>
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  title: 'Agreement terms',
-};

package/src/components/atoms/Accordion/Accordion.tsx

@@ -1,100 +0,0 @@
-import React, { useRef } from 'react';
-import { Icon, Text, ThemeProp } from '@tecsinapse/react-core';
-import {
-  AccordionContainer,
-  IconContainer,
-  TitleContainer,
-  ContentContainer,
-} from './styled';
-import { Transition } from 'react-transition-group';
-import {
-  contentStyle,
-  contentTransition,
-  titleStyle,
-  titleTransition,
-} from './animations';
-import { useTheme } from '@emotion/react';
-
-export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
-  open?: boolean;
-  onChange?: () => void;
-  title: string;
-  /** Transition time for collapse effect in ms */
-  transition?: number;
-}
-
-const Accordion: React.FC<AccordionProps> = ({
-  title,
-  open: _open = false,
-  onChange,
-  transition = 200,
-  children,
-  ...rest
-}) => {
-  const [open, setOpen] = React.useState(_open);
-  const [contentHeight, setContentHeight] = React.useState(0);
-  const theme = useTheme() as ThemeProp;
-
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  React.useEffect(() => setOpen(_open), [_open]);
-
-  React.useLayoutEffect(() => {
-    const size = Array.from(
-      (ref.current?.children || []) as HTMLCollection
-    ).reduce((prev, curr) => prev + curr.clientHeight, 0);
-    setContentHeight(size);
-  }, []);
-
-  const handleClick = React.useCallback(() => {
-    if (onChange) {
-      onChange();
-      return;
-    }
-    setOpen(state => !state);
-  }, [onChange]);
-
-  return (
-    <AccordionContainer {...rest}>
-      <TitleContainer onClick={handleClick}>
-        <Transition in={open} timeout={transition}>
-          {state => (
-            <Text
-              typography="h4"
-              fontWeight="bold"
-              style={{
-                ...titleStyle(transition, theme),
-                ...titleTransition(theme)[state],
-              }}
-            >
-              {title}
-            </Text>
-          )}
-        </Transition>
-        <IconContainer>
-          <Icon
-            type="material-community"
-            name={open ? 'chevron-up' : 'chevron-down'}
-            size="kilo"
-            fontColor="medium"
-          />
-        </IconContainer>
-      </TitleContainer>
-      <Transition in={open} timeout={transition}>
-        {state => (
-          <ContentContainer
-            ref={htmlEl => (ref.current = htmlEl)}
-            style={{
-              ...contentStyle(open, transition, contentHeight, theme),
-              ...contentTransition(contentHeight, theme)[state],
-            }}
-          >
-            {children}
-          </ContentContainer>
-        )}
-      </Transition>
-    </AccordionContainer>
-  );
-};
-
-export default Accordion;

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

@@ -1,51 +0,0 @@
-import { ThemeProp, extractNumbersFromString } from '@tecsinapse/react-core';
-
-export const contentStyle = (
-  open: boolean,
-  transition: number,
-  value: number,
-  theme: ThemeProp
-) => ({
-  transition: `padding-bottom ${transition * 2}ms ease-in-out, height ${
-    transition * 2
-  }ms ease-in-out`,
-  paddingBottom: open ? extractNumbersFromString(theme.spacing.kilo) : 0,
-  height: open ? value : 0,
-});
-
-export const contentTransition = (value: number, theme: ThemeProp) => {
-  const paddingBottom = extractNumbersFromString(theme.spacing.kilo);
-  return {
-    entering: {
-      paddingBottom,
-      height: value,
-    },
-    entered: {
-      paddingBottom,
-      height: value,
-    },
-    exiting: {
-      paddingBottom,
-      height: value,
-    },
-    exited: { paddingBottom: 0, height: 0 },
-  };
-};
-
-export const titleStyle = (transition: number, theme: ThemeProp) => ({
-  transition: `color ${transition * 2}ms ease-in-out`,
-  color: theme.font.color.dark,
-});
-
-export const titleTransition = (theme: ThemeProp) => ({
-  entering: {
-    color: theme.font.color.orange,
-  },
-  entered: {
-    color: theme.font.color.orange,
-  },
-  exiting: {
-    color: theme.font.color.orange,
-  },
-  exited: { color: theme.font.color.dark },
-});

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

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

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

@@ -1,35 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-
-export const IconContainer = styled('div')<Partial<StyleProps>>`
-  border-radius: ${({ theme }) => theme.borderRadius.mili};
-  border: ${({ theme }) =>
-    `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};
-  display: flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const TitleContainer = styled('div')<Partial<StyleProps>>`
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  justify-content: space-between;
-  cursor: pointer;
-  padding: ${({ theme }) => theme.spacing.kilo} 0;
-`;
-
-export const AccordionContainer = styled('div')<Partial<StyleProps>>`
-  display: flex;
-  flex-direction: column;
-  border-bottom: ${({ theme }) =>
-    `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};
-  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-`;
-
-export const ContentContainer = styled('div')`
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-`;

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

@@ -1,24 +0,0 @@
-import { Story } from '@storybook/react';
-import { Icon } from '@tecsinapse/react-core';
-import { BadgeWebProps } from './Badge';
-import React from 'react';
-import { Badge } from '.';
-
-export default {
-  title: 'Hybrid/Badge',
-  component: Badge,
-};
-
-const Template: Story<BadgeWebProps> = ({ color, fontColor, tone }) => (
-  <Badge color={color} tone={tone} value={5} fontColor={fontColor}>
-    <Icon name={'user-circle'} type={'font-awesome'} size={'mega'} />
-  </Badge>
-);
-
-export const Base = Template.bind({});
-
-Base.args = {
-  color: 'primary',
-  fontColor: 'light',
-  tone: 'medium',
-};

package/src/components/atoms/Badge/Badge.tsx

@@ -1,34 +0,0 @@
-import {
-  BadgeProps,
-  Badge as BadgeCore,
-  Text,
-  FontColorType,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-
-export interface BadgeWebProps extends Omit<BadgeProps, 'value'> {
-  fontColor?: FontColorType;
-  value: string | number;
-}
-
-const Badge: FC<BadgeWebProps> = ({
-  children,
-  fontColor = 'light',
-  value,
-  ...props
-}) => {
-  return (
-    <BadgeCore
-      {...props}
-      value={
-        <Text fontColor={fontColor} fontWeight={'bold'} typography={'label'}>
-          {value}
-        </Text>
-      }
-    >
-      {children}
-    </BadgeCore>
-  );
-};
-
-export default Badge;

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

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

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

@@ -1,35 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react';
-import { Text } from '@tecsinapse/react-core';
-import React from 'react';
-import Button, { WebButtonProps } from './Button';
-
-export default {
-  title: 'Hybrid/Button',
-  component: Button,
-};
-
-interface ButtonPropsExtended extends WebButtonProps {
-  label: string;
-}
-
-const Template: Story<ButtonPropsExtended> = args => (
-  <div style={{ width: 200 }}>
-    <Button {...args}>
-      <Text fontWeight="bold" fontColor="light">
-        {args.label}
-      </Text>
-    </Button>
-  </div>
-);
-
-export const Base = Template.bind({});
-
-Base.args = {
-  onPress: e => action('onPress')(e),
-  label: 'Button',
-  color: 'primary',
-  variant: 'filled',
-  tone: 'medium',
-  size: 'small',
-};

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