@tecsinapse/react-web-kit 1.22.1 → 1.22.3

package/src/components/atoms/Tag/Tag.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import {
-  Text,
-  Tag as TagCore,
-  TagProps as TagCoreProps,
-  TextProps,
-} from '@tecsinapse/react-core';
-
-export interface TagProps extends Omit<TagCoreProps, 'value'> {
-  value: string;
-  textProps?: TextProps;
-}
-
-const Tag: React.FC<TagProps> = ({
-  value,
-  textProps,
-  ...rest
-}): JSX.Element => {
-  const {
-    colorVariant = 'secondary',
-    colorTone = 'dark',
-    fontStack = 'default',
-    fontWeight = 'bold',
-  } = textProps || {};
-  return (
-    <TagCore
-      value={
-        <Text
-          colorVariant={colorVariant}
-          colorTone={colorTone}
-          fontStack={fontStack}
-          fontWeight={fontWeight}
-          typography={rest.variant === 'small' ? 'sub' : 'base'}
-        >
-          {value}
-        </Text>
-      }
-      {...rest}
-    />
-  );
-};
-
-export default Tag;

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

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

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import Tooltip, { ITooltip } from './Tooltip';
-import { Button } from '../Button';
-import { Text } from '@tecsinapse/react-core';
-
-export default {
-  title: 'Web/Tooltip',
-  component: Tooltip,
-};
-
-const Template: Story<ITooltip> = args => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <Tooltip {...args}>
-        <Button>
-          <Text fontColor="light" fontWeight="bold">
-            Hover me
-          </Text>
-        </Button>
-      </Tooltip>
-    </div>
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  title: 'Tooltip',
-};

package/src/components/atoms/Tooltip/Tooltip.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { Text } from '@tecsinapse/react-core';
-import { Container, TooltipSpan } from './styled';
-
-export type ComputedType = { width?: number; height?: number };
-export type Position = 'top' | 'bottom' | 'right' | 'left';
-
-export interface ITooltip {
-  title: string;
-  position?: Position;
-  children?: React.ReactNode;
-}
-
-const Tooltip: React.FC<ITooltip> = ({
-  children,
-  title,
-  position = 'bottom',
-}) => {
-  const spanRef = React.useRef<HTMLSpanElement | null>();
-  const [computed, setComputed] = React.useState<ComputedType | undefined>(
-    undefined
-  );
-
-  React.useLayoutEffect(() => {
-    setComputed({
-      width: spanRef.current?.clientWidth,
-      height: spanRef.current?.clientHeight,
-    });
-  }, []);
-
-  return (
-    <Container position={position}>
-      {children}
-      <TooltipSpan
-        computed={computed}
-        position={position}
-        ref={ref => (spanRef.current = ref)}
-      >
-        <Text
-          fontWeight="bold"
-          typography="base"
-          colorVariant="secondary"
-          colorTone="xlight"
-        >
-          {title}
-        </Text>
-      </TooltipSpan>
-    </Container>
-  );
-};
-
-export default Tooltip;

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

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

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

@@ -1,159 +0,0 @@
-import { css } from '@emotion/react';
-import { StyleProps, ThemeProp } from '@tecsinapse/react-core';
-import styled from '@emotion/styled';
-import { ComputedType, Position } from './Tooltip';
-
-type InjectedProps = { computed?: ComputedType; position?: Position };
-
-/** Bottom/Top commons */
-const bottomOrTopStylesCommon = (width: number, position) =>
-  ['top', 'bottom'].includes(position as Position) &&
-  css`
-    left: 50%;
-    margin-left: -${width / 2}px;
-  `;
-
-const bottomOrTopArrowCommon = (position?: Position) =>
-  ['top', 'bottom'].includes(position as Position) &&
-  css`
-    left: 50%;
-    margin-left: -5px;
-  `;
-
-/** Top */
-const topStyles = (theme: ThemeProp, position?: Position) =>
-  position === 'top' &&
-  css`
-    bottom: 100%;
-    margin-bottom: ${theme.spacing.centi};
-    transform: translateY(10%);
-  `;
-
-const topArrow = (theme: ThemeProp, position?: Position) =>
-  position === 'top' &&
-  css`
-    top: 100%;
-    border-color: ${theme.color.secondary.xdark} transparent transparent
-      transparent;
-  `;
-
-/** Bottom */
-const bottomStyles = (theme: ThemeProp, position?: Position) =>
-  position === 'bottom' &&
-  css`
-    top: 100%;
-    margin-top: ${theme.spacing.centi};
-    transform: translateY(-10%);
-  `;
-
-const bottomArrow = (theme: ThemeProp, position?: Position) =>
-  position === 'bottom' &&
-  css`
-    bottom: 100%;
-    border-color: transparent transparent ${theme.color.secondary.xdark}
-      transparent;
-  `;
-
-/** Bottom/Top commons */
-const leftAndRightCommonStyles = (height: number, position?: Position) =>
-  ['right', 'left'].includes(position as Position) &&
-  css`
-    top: 50%;
-    margin-top: -${height / 2}px;
-  `;
-
-const leftOrRightArrowCommon = (position?: Position) =>
-  ['right', 'left'].includes(position as Position) &&
-  css`
-    top: 50%;
-    margin-top: -5px;
-  `;
-
-/** Left */
-const leftStyles = (theme: ThemeProp, position?: Position) =>
-  position === 'left' &&
-  css`
-    right: 100%;
-    margin-right: ${theme.spacing.centi};
-    transform: translateX(10%);
-  `;
-
-const leftArrow = (theme: ThemeProp, position?: Position) =>
-  position === 'left' &&
-  css`
-    left: 100%;
-    border-color: transparent transparent transparent
-      ${theme.color.secondary.xdark};
-  `;
-
-/** Right */
-const rightStyles = (theme: ThemeProp, position?: Position) =>
-  position === 'right' &&
-  css`
-    left: 100%;
-    margin-left: ${theme.spacing.centi};
-    transform: translateX(-10%);
-  `;
-
-const rightArrow = (theme: ThemeProp, position?: Position) =>
-  position === 'right' &&
-  css`
-    right: 100%;
-    border-color: transparent ${theme.color.secondary.xdark} transparent
-      transparent;
-  `;
-
-export const TooltipSpan = styled('span')<Partial<StyleProps> & InjectedProps>(
-  ({ theme, computed, position }) => {
-    const { width = 0, height = 0 } = computed || {};
-    return css`
-      position: absolute;
-      width: max-content;
-      padding: ${theme.spacing.micro} ${theme.spacing.centi};
-      border-radius: ${theme.borderRadius.mili};
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
-      background-color: ${theme.color.secondary.xdark};
-      z-index: ${theme.zIndex.absolute};
-
-      ${bottomOrTopStylesCommon(width, position)}
-      ${bottomStyles(theme, position)}
-      ${topStyles(theme, position)}
-      
-      ${leftAndRightCommonStyles(height, position)}
-      ${leftStyles(theme, position)}
-      ${rightStyles(theme, position)}
-
-      &::after {
-        content: '';
-        position: absolute;
-        border-style: solid;
-        border-width: 5px;
-
-        ${bottomOrTopArrowCommon(position)}
-        ${bottomArrow(theme, position)}
-        ${topArrow(theme, position)}
-        
-        ${leftOrRightArrowCommon(position)}
-        ${leftArrow(theme, position)}
-        ${rightArrow(theme, position)}
-      }
-    `;
-  }
-);
-
-export const Container = styled('div')<{ position?: Position }>`
-  position: relative;
-  &:hover {
-    & > span {
-      opacity: 1;
-      visibility: visible;
-      display: flex;
-      transform: ${({ position }) =>
-        position === 'left' || position === 'right'
-          ? 'translateX(0%)'
-          : 'translateY(0%)'};
-    }
-  }
-`;

package/src/components/molecules/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.tsx

@@ -1,40 +0,0 @@
-import React, { ElementType, FC } from 'react';
-import { Icon, Text } from '@tecsinapse/react-core';
-import { StyledContainerItem, StyledContainerIcon } from './styled';
-
-export interface BreadcrumbItemProps {
-  Component: ElementType;
-  props: any;
-  isLast: boolean;
-  title: string;
-}
-
-const BreadcrumbItem: FC<BreadcrumbItemProps> = ({
-  props,
-  Component,
-  isLast,
-  title,
-}) => {
-  const noTextDecoration = { textDecoration: 'none' };
-  return (
-    <StyledContainerItem>
-      <Component {...props} style={noTextDecoration}>
-        <Text colorVariant="secondary" colorTone={isLast ? 'medium' : 'xdark'}>
-          {title}
-        </Text>
-      </Component>
-      {!isLast && (
-        <StyledContainerIcon>
-          <Icon
-            name="chevron-double-right"
-            type="material-community"
-            size="centi"
-            fontColor="orange"
-          />
-        </StyledContainerIcon>
-      )}
-    </StyledContainerItem>
-  );
-};
-
-export default BreadcrumbItem;

package/src/components/molecules/Breadcrumbs/BreadcrumbItem/index.ts

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

package/src/components/molecules/Breadcrumbs/BreadcrumbItem/styled.ts

@@ -1,18 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-
-export const StyledContainerItem = styled('div')<Partial<StyleProps>>`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-  margin-right: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const StyledContainerIcon = styled('div')<Partial<StyleProps>>`
-  margin-left: ${({ theme }) => theme.spacing.mili};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-`;

package/src/components/molecules/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,59 +0,0 @@
-import { Story } from '@storybook/react';
-import React, { ElementType } from 'react';
-import { StyleProps } from '@tecsinapse/react-core';
-
-import { default as Breadcrumbs } from './Breadcrumbs';
-import styled from '@emotion/styled';
-
-export default {
-  title: 'Web/Breadcrumbs',
-  component: Breadcrumbs,
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-const breadcrumbs = [
-  {
-    title: 'Início',
-    Component: 'a' as ElementType,
-    componentProps: {
-      href: 'https://www.tecsinapse.com.br/br',
-    },
-  },
-  {
-    title: 'Carteira de clientes',
-    Component: 'a' as ElementType,
-    componentProps: {
-      href: 'https://www.tecsinapse.com.br/',
-    },
-  },
-  {
-    title: 'Minha carteira',
-    Component: 'a' as ElementType,
-  },
-];
-const Template: Story = () => {
-  return (
-    <Container>
-      <ContainerBreadcrumb>
-        <Breadcrumbs breadcrumbs={breadcrumbs} />
-      </ContainerBreadcrumb>
-    </Container>
-  );
-};
-
-const Container = styled('div')<Partial<StyleProps>>`
-  width: 100%;
-  background-color: ${({ theme }: StyleProps) => theme.miscellaneous.bodyColor};
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const ContainerBreadcrumb = styled('div')`
-  width: 90%;
-`;
-
-export const Base = Template.bind({});

package/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx

@@ -1,34 +0,0 @@
-import React, { ElementType, FC } from 'react';
-import { StyledContainerBreadcrumbs } from './styled';
-import { BreadcrumbItem } from './BreadcrumbItem';
-
-export type BreadcrumbType = {
-  title: string;
-  Component: ElementType;
-  props?: any;
-};
-
-export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
-  breadcrumbs: BreadcrumbType[];
-}
-
-const Breadcrumbs: FC<BreadcrumbsProps> = ({ breadcrumbs, ...rest }) => {
-  return (
-    <StyledContainerBreadcrumbs {...rest}>
-      {breadcrumbs.map((item, index) => {
-        const { props, Component = 'a', title } = item;
-        return (
-          <BreadcrumbItem
-            key={index}
-            Component={Component}
-            props={props}
-            isLast={breadcrumbs.length - 1 === index}
-            title={title}
-          />
-        );
-      })}
-    </StyledContainerBreadcrumbs>
-  );
-};
-
-export default Breadcrumbs;

package/src/components/molecules/Breadcrumbs/index.ts

@@ -1,2 +0,0 @@
-export { default as Breadcrumbs } from './Breadcrumbs';
-export type { BreadcrumbsProps, BreadcrumbType } from './Breadcrumbs';

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

@@ -1,13 +0,0 @@
-import styled from '@emotion/styled';
-import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
-
-export const StyledContainerBreadcrumbs = styled('div')<Partial<StyleProps>>`
-  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};
-  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};
-  box-shadow: 0px 2px 8px
-    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
-`;

package/src/components/molecules/DatePicker/DatePicker.stories.tsx

@@ -1,44 +0,0 @@
-import { Story } from '@storybook/react';
-import { DatePickerProps, DateRange } from '@tecsinapse/react-core';
-import { ptBR } from 'date-fns/locale';
-import React from 'react';
-import { DatePicker } from './DatePicker';
-
-export default {
-  title: 'Web/Date Picker',
-  component: DatePicker,
-};
-
-const Template: Story<DatePickerProps<'range'>> = args => {
-  const [value, setValue] = React.useState<DateRange>();
-
-  return (
-    <DatePicker {...args} value={value} onChange={setValue} locale={ptBR} />
-  );
-};
-
-export const Range = Template.bind({});
-
-Range.args = {
-  label: 'Select date',
-  placeholder: 'Select date',
-  type: 'range',
-  closeOnPick: false,
-};
-
-const TemplateDay: Story<DatePickerProps<'day'>> = args => {
-  const [value, setValue] = React.useState<Date>();
-
-  return (
-    <DatePicker {...args} value={value} onChange={setValue} locale={ptBR} />
-  );
-};
-
-export const Day = TemplateDay.bind({});
-
-Day.args = {
-  label: 'Select date',
-  placeholder: 'Select date',
-  type: 'day',
-  closeOnPick: true,
-};

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -1,162 +0,0 @@
-import {
-  Button,
-  Calendar,
-  DatePicker as DatePickerCore,
-  DatePickerProps,
-  DateRange,
-  Masks,
-  SelectionType,
-} from '@tecsinapse/react-core';
-import React, { useCallback, useMemo, useState } from 'react';
-import { Dropdown } from '../../atoms/Dropdown';
-import { CalendarIcon } from '@tecsinapse/react-core/src/components/molecules/DatePicker/styled';
-import { InputMask } from '@tecsinapse/react-web-kit';
-import { parse, isValid } from 'date-fns';
-
-export type WebDatePickerProps<T extends SelectionType> = Omit<
-  DatePickerProps<T>,
-  | 'CalendarComponent'
-  | 'renderCalendar'
-  | 'requestCloseCalendar'
-  | 'requestShowCalendar'
-> & {
-  callbackAfterValidated?: (valid: boolean, message?: string) => void;
-};
-
-export const DatePicker = <T extends SelectionType>({
-  value,
-  type,
-  locale,
-  onChange,
-  callbackAfterValidated,
-  ...rest
-}: WebDatePickerProps<T>): JSX.Element => {
-  const [visible, setVisible] = useState(false);
-  const [controlledInput, setControlledInput] = useState<string>();
-  const show = useCallback(() => setVisible(true), []);
-  const close = useCallback(() => setVisible(false), []);
-  const [error, setError] = useState<boolean>(false);
-
-  const getYear = useMemo(() => {
-    if (value) {
-      if (type === 'range') {
-        if ((value as DateRange).lowest !== undefined)
-          return new Date((value as DateRange).lowest).getFullYear();
-      } else {
-        return new Date(value as Date).getFullYear();
-      }
-    }
-    return undefined;
-  }, [value]);
-
-  const getMonth = useMemo(() => {
-    if (value) {
-      if (type === 'range') {
-        if ((value as DateRange).lowest !== undefined)
-          return new Date((value as DateRange).lowest).getMonth();
-      } else {
-        return new Date(value as Date).getMonth();
-      }
-    }
-    return undefined;
-  }, [value]);
-
-  const controlComponent = (onPress, displayValue) => {
-    return (
-      <InputMask
-        onBlur={() => {
-          if (
-            (controlledInput ?? []).length < 8 &&
-            (controlledInput ?? []).length > 0
-          ) {
-            setError(true);
-            callbackAfterValidated?.(false, 'Data inválida');
-          }
-          if (controlledInput?.length === 8) {
-            const auxData = parse(controlledInput, 'ddMMyyyy', new Date(), {
-              locale,
-            });
-            const isValidDate = isValid(auxData);
-            callbackAfterValidated?.(isValidDate, 'Data inválida');
-
-            if (isValidDate && auxData !== value) {
-              setError(false);
-              onChange?.(auxData as typeof value);
-            }
-          }
-          if (controlledInput?.length === 0) {
-            setError(true);
-            callbackAfterValidated?.(false, 'Data inválida');
-          }
-        }}
-        mask={Masks.DATE}
-        value={displayValue}
-        hint={error ? 'Data inválida' : ''}
-        variant={error ? 'error' : 'default'}
-        onChange={input => {
-          setControlledInput(input);
-          if ((error && input.length < 8) || isValid(value)) {
-            callbackAfterValidated?.(true);
-            setError(false);
-          }
-        }}
-        placeholder={'Não informada'}
-        rightComponent={
-          <Button
-            effect={'none'}
-            variant={'text'}
-            style={{ padding: 0 }}
-            onPress={onPress}
-          >
-            <CalendarIcon name="calendar-sharp" type="ionicon" size="centi" />
-          </Button>
-        }
-      />
-    );
-  };
-
-  if (type === 'day') {
-    return (
-      <DatePickerCore
-        {...rest}
-        CalendarComponent={Calendar}
-        onChange={onChange}
-        locale={locale}
-        value={value}
-        type={type}
-        year={getYear}
-        format={'dd/MM/yyyy'}
-        month={getMonth}
-        requestShowCalendar={show}
-        requestCloseCalendar={close}
-        renderCalendar={calendar => (
-          <Dropdown visible={visible} setVisible={setVisible}>
-            {calendar}
-          </Dropdown>
-        )}
-        controlComponent={controlComponent}
-      />
-    );
-  } else {
-    return (
-      <DatePickerCore
-        {...rest}
-        CalendarComponent={Calendar}
-        onChange={onChange}
-        locale={locale}
-        value={value}
-        type={type}
-        year={getYear}
-        format={'dd/MM/yyyy'}
-        month={getMonth}
-        requestShowCalendar={show}
-        requestCloseCalendar={close}
-        renderCalendar={calendar => (
-          <Dropdown visible={visible} setVisible={setVisible}>
-            {calendar}
-          </Dropdown>
-        )}
-      />
-    );
-  }
-};