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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+import {
+  CalendarProps,
+  PressableSurface,
+  SelectionType,
+} from '@tecsinapse/react-core';
+import * as React from 'react';
+import { Modal as RNModal, ModalProps } from 'react-native';
+import { Backdrop, ModalContent } from './styled';
+
+const Component = <T extends SelectionType>({
+  onRequestClose,
+  children,
+  ...modalProps
+}: CalendarProps<T> & ModalProps & { children: JSX.Element }): JSX.Element => {
+  return (
+    <RNModal
+      transparent
+      hardwareAccelerated
+      statusBarTranslucent
+      {...modalProps}
+      onRequestClose={onRequestClose}
+    >
+      <Backdrop onPress={onRequestClose} effect="none">
+        <PressableSurface>
+          <ModalContent>{children}</ModalContent>
+        </PressableSurface>
+      </Backdrop>
+    </RNModal>
+  );
+};
+
+export const Modal = Component;

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

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { WebDatePickerProps } from './DatePicker';

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

@@ -0,0 +1,36 @@
+import styled, { css } from '@emotion/native';
+import { hex2rgba, PressableSurface, StyleProps } from '@tecsinapse/react-core';
+import { Platform } from 'react-native';
+
+const isWeb = Platform.OS === 'web';
+
+export const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`
+  ${({ theme }) =>
+    isWeb
+      ? css`
+          justify-content: center;
+          align-items: center;
+          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};
+          height: 100vh;
+        `
+      : css`
+          justify-content: flex-end;
+          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};
+          height: 100%;
+        `}
+`;
+
+export const ModalContent = styled.View<Partial<StyleProps>>`
+  background-color: transparent;
+  ${({ theme: { borderRadius } }) => css`
+    ${isWeb
+      ? `
+      border-radius: ${borderRadius.micro};
+    `
+      : `
+      border-top-left-radius: ${borderRadius.deca};
+      border-top-right-radius: ${borderRadius.deca};
+    `}
+  `}
+  overflow: hidden;
+`;