@tecsinapse/react-web-kit 1.22.2 → 1.22.4

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

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

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

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

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

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

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

@@ -1,32 +0,0 @@
-import { Story } from '@storybook/react';
-import { DateTimePickerProps } from '@tecsinapse/react-core';
-import { ptBR } from 'date-fns/locale';
-import React from 'react';
-import { DateTimePicker } from './DateTimePicker';
-
-export default {
-  title: 'Web/Date Time Picker',
-  component: DateTimePicker,
-};
-
-const Template: Story<DateTimePickerProps> = ({ ...args }) => {
-  const [value, setValue] = React.useState<Date>();
-
-  return (
-    <DateTimePicker
-      value={value}
-      onChange={setValue}
-      locale={ptBR}
-      {...args}
-    />
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  mode: 'datetime',
-  format: 'dd/MM/yyyy HH:mm',
-  label: 'Select date and time',
-  placeholder: 'Select date and time'
-};

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -1,31 +0,0 @@
-import {
-  DateTimePicker as DateTimePickerCore,
-  DateTimePickerProps,
-} from '@tecsinapse/react-core';
-import React, { FC, useCallback, useState } from 'react';
-import { Dropdown } from '../../atoms/Dropdown';
-
-export type WebDateTimePickerProps = Omit<
-  DateTimePickerProps,
-  'renderSelector' | 'requestShowSelector' | 'requestCloseSelector'
->;
-
-export const DateTimePicker: FC<WebDateTimePickerProps> = ({ ...rest }) => {
-  const [visible, setVisible] = useState<boolean>(false);
-
-  const show = useCallback(() => setVisible(true), []);
-  const close = useCallback(() => setVisible(false), []);
-
-  return (
-    <DateTimePickerCore
-      {...rest}
-      requestShowSelector={show}
-      requestCloseSelector={close}
-      renderSelector={selector => (
-        <Dropdown visible={visible} setVisible={setVisible}>
-          {selector}
-        </Dropdown>
-      )}
-    />
-  );
-};

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

@@ -1,26 +0,0 @@
-import { DateTimeSelectorProps } from '@tecsinapse/react-core';
-import * as React from 'react';
-import { Modal as RNModal, ModalProps } from 'react-native';
-import { Backdrop, ModalContent } from './styled';
-
-const Component: React.FC<DateTimeSelectorProps & ModalProps> = ({
-  onRequestClose,
-  children,
-  ...rest
-}) => {
-  return (
-    <RNModal
-      transparent
-      hardwareAccelerated
-      statusBarTranslucent
-      {...rest}
-      onRequestClose={onRequestClose}
-    >
-      <Backdrop onPress={onRequestClose} effect="none">
-        <ModalContent>{children}</ModalContent>
-      </Backdrop>
-    </RNModal>
-  );
-};
-
-export const Modal = Component;

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

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

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

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

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

@@ -1,68 +0,0 @@
-import { Story } from '@storybook/react';
-import React from 'react';
-import styled from '@emotion/styled';
-
-import { Button, Icon, Text } from '@tecsinapse/react-core';
-import { default as Drawer, DrawerProps } from './Drawer';
-
-export default {
-  title: 'Web/Drawer',
-  component: Drawer,
-};
-
-const Template: Story<DrawerProps> = ({ anchorPosition, open }) => {
-  const [isOpen, setOpen] = React.useState<boolean>(open);
-
-  const toggleOpen = () => {
-    setOpen(!isOpen);
-  };
-
-  return (
-    <>
-      <Drawer
-        open={isOpen}
-        onClose={toggleOpen}
-        anchorPosition={anchorPosition}
-      >
-        <StyledHeaderDrawerStory>
-          <StyledTextHeader typography="h4">Design System</StyledTextHeader>
-          <StyledHButtonHeaderStory>
-            <Button size="small" onPress={toggleOpen} variant="text">
-              <Icon name="close" type="material-community" />
-            </Button>
-          </StyledHButtonHeaderStory>
-        </StyledHeaderDrawerStory>
-      </Drawer>
-      <Button onPress={toggleOpen}>
-        <StyledTextButton fontColor="light">Open Drawer</StyledTextButton>
-      </Button>
-    </>
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  anchorPosition: 'right',
-  open: false,
-};
-
-const StyledHeaderDrawerStory = styled('div')`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-`;
-
-const StyledHButtonHeaderStory = styled('div')`
-  margin-left: 10px;
-`;
-
-const StyledTextButton = styled(Text)`
-  user-select: none;
-`;
-
-const StyledTextHeader = styled(Text)`
-  white-space: nowrap;
-`;

package/src/components/molecules/Drawer/Drawer.tsx

@@ -1,70 +0,0 @@
-import React, { FC } from 'react';
-import { StyledContainerDrawer } from './styled';
-import { Transition, TransitionStatus } from 'react-transition-group';
-import { Overlay } from '../../atoms/Overlay';
-import {
-  transitionStylesTopBottom,
-  defaultStylesTopBottom,
-  defaultStylesLeftRight,
-  transitionStylesLeftRight,
-} from './animations';
-
-type AnchorPosition = 'left' | 'right' | 'top' | 'bottom';
-
-export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
-  open: boolean;
-  onClose: () => void;
-  anchorPosition: AnchorPosition;
-}
-
-const Drawer: FC<DrawerProps> = ({
-  open,
-  anchorPosition = 'right',
-  onClose,
-  children,
-  style,
-  ...rest
-}) => {
-  const getStyles = (
-    anchorPosition: AnchorPosition,
-    state: TransitionStatus
-  ) => {
-    const stylesLeftRight = defaultStylesLeftRight(anchorPosition);
-    const transitionLeftRight = transitionStylesLeftRight(anchorPosition);
-    const stylesTopBottom = defaultStylesTopBottom(anchorPosition);
-    const transitionTopBottom = transitionStylesTopBottom(anchorPosition);
-
-    if (['left', 'right'].includes(anchorPosition)) {
-      return {
-        ...stylesLeftRight,
-        ...transitionLeftRight[state],
-      };
-    } else {
-      return {
-        ...stylesTopBottom,
-        ...transitionTopBottom[state],
-      };
-    }
-  };
-
-  return (
-    <>
-      <Overlay timeout={300} open={open} onClose={onClose} zIndex="drawer" />
-      <Transition in={open} timeout={300}>
-        {state => (
-          <StyledContainerDrawer
-            style={{ ...style, ...getStyles(anchorPosition, state) }}
-            anchorPosition={anchorPosition}
-            onClose={onClose}
-            open={open}
-            {...rest}
-          >
-            {children}
-          </StyledContainerDrawer>
-        )}
-      </Transition>
-    </>
-  );
-};
-
-export default Drawer;