@tecsinapse/react-web-kit 1.22.2 → 1.22.3

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;

package/src/components/molecules/Drawer/animations.ts

@@ -1,58 +0,0 @@
-import { CSSProperties } from 'react';
-
-export const transformLeftRigthClose = (anchorPosition: string) =>
-  anchorPosition === 'right' ? 'translateX(100%)' : 'translateX(-100%)';
-
-export const transformLeftRigthOpen = 'translateX(0)';
-
-export const transformTopBottomClose = (anchorPosition: string) =>
-  anchorPosition === 'top' ? 'translateY(-100%)' : 'translateY(100%)';
-
-export const transformTopBottomOpen = 'translateY(0%)';
-
-export const defaultStylesLeftRight = (
-  anchorPosition: string
-): CSSProperties => {
-  return {
-    transition: 'transform 300ms ease-in-out',
-    transform: transformLeftRigthClose(anchorPosition),
-    overflowX: 'hidden',
-    overflowY: 'auto',
-  };
-};
-
-export const transitionStylesLeftRight = (anchorPosition: string) => {
-  return {
-    entering: { transform: transformLeftRigthClose(anchorPosition) },
-    entered: {
-      transform: transformLeftRigthOpen,
-    },
-    exiting: {
-      transform: transformLeftRigthOpen,
-    },
-    exited: { transform: transformLeftRigthClose(anchorPosition) },
-  };
-};
-
-export const defaultStylesTopBottom = (
-  anchorPosition: string
-): CSSProperties => {
-  return {
-    transition: 'transform 300ms ease-in-out',
-    transform: transformTopBottomClose(anchorPosition),
-    overflowX: 'hidden',
-    overflowY: 'auto',
-  };
-};
-export const transitionStylesTopBottom = (anchorPosition: string) => {
-  return {
-    entering: { transform: transformTopBottomClose(anchorPosition) },
-    entered: {
-      transform: transformTopBottomOpen,
-    },
-    exiting: {
-      transform: transformTopBottomOpen,
-    },
-    exited: { transform: transformTopBottomClose(anchorPosition) },
-  };
-};

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

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

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

@@ -1,76 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-import { DrawerProps } from './Drawer';
-import { css } from '@emotion/react';
-
-const anchorLeft = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
-  return (
-    anchorPosition === 'left' &&
-    css`
-      left: 0;
-      top: 0;
-      border-top-right-radius: ${theme.borderRadius.centi};
-      border-bottom-right-radius: ${theme.borderRadius.centi};
-    `
-  );
-};
-const anchorRight = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
-  return (
-    anchorPosition === 'right' &&
-    css`
-      right: 0;
-      top: 0;
-      border-top-left-radius: ${theme.borderRadius.centi};
-      border-bottom-left-radius: ${theme.borderRadius.centi};
-    `
-  );
-};
-
-const anchorTop = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
-  return (
-    anchorPosition === 'top' &&
-    css`
-      left: 0;
-      right: 0;
-      top: 0;
-      border-bottom-right-radius: ${theme.borderRadius.centi};
-      border-bottom-left-radius: ${theme.borderRadius.centi};
-    `
-  );
-};
-
-const anchorBottom = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
-  return (
-    anchorPosition === 'bottom' &&
-    css`
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-top-right-radius: ${theme.borderRadius.centi};
-      border-top-left-radius: ${theme.borderRadius.centi};
-    `
-  );
-};
-
-const baseStyles = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
-  return css`
-    height: ${['left', 'right'].includes(anchorPosition) && '100vh'};
-    width: ${['top', 'bottom'].includes(anchorPosition) && '100wh'};
-    position: fixed;
-    overflow: hidden;
-    background-color: ${theme.miscellaneous.bodyColor};
-    z-index: ${theme.zIndex.drawer};
-  `;
-};
-
-export const StyledContainerDrawer = styled('div')<
-  DrawerProps & Partial<StyleProps>
->(
-  props => css`
-    ${baseStyles(props)}
-    ${anchorBottom(props)}
-    ${anchorTop(props)}
-    ${anchorLeft(props)}
-    ${anchorRight(props)}
-  `
-);

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

@@ -1,198 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import Grid, { IGridWeb } from './Grid';
-import { GridItem } from './Item';
-import { Text } from '@tecsinapse/react-web-kit';
-import styled from '@emotion/styled';
-
-export default {
-  title: 'Web/Grid',
-  component: Grid,
-  subcomponents: { GridItem },
-};
-
-const Container = styled('div')`
-  background-color: orange;
-  padding: 8px;
-  border-width: 1px;
-  border-color: white;
-  border-style: solid;
-  border-radius: 8px;
-`;
-
-const TemplateGrid: Story<IGridWeb> = args => {
-  return (
-    <Grid {...args}>
-      <GridItem wrapper span={12}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-
-      <GridItem wrapper span={6}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem wrapper span={6}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-
-      <GridItem wrapper span={4} flexShrink={1}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem wrapper span={4} flexGrow={1}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem wrapper span={4} flexShrink={1}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-
-      <GridItem wrapper span={3} flexBasis={'content'} flex={1}>
-        {/** Width should consider component padding and grid spacing (8px left + 8px right + 2px grid for nano) */}
-        <Container style={{ width: 'calc(100% - 18px)' }}>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem wrapper span={3} flexBasis={'content'}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem wrapper span={3} flexBasis={'content'}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem wrapper span={3} flexBasis={'content'}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-    </Grid>
-  );
-};
-
-export const WithGridItem = TemplateGrid.bind({});
-
-WithGridItem.args = {
-  spacing: 'nano',
-};
-
-const TemplateLayout: Story<IGridWeb> = args => {
-  return (
-    <Grid {...args}>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-      <Container>
-        <Text>Box</Text>
-      </Container>
-    </Grid>
-  );
-};
-
-export const WithLayout = TemplateLayout.bind({});
-
-WithLayout.args = {
-  layout: [[12], [6, 6], [4, 4, 4], [3, 3, 3, 3]],
-  spacing: 'mili',
-};
-
-const TemplateResponsive: Story<IGridWeb> = args => {
-  return (
-    <Grid {...args}>
-      <GridItem wrapper span={{ sm: 12 }}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-
-      <GridItem wrapper span={{ sm: 6, md: 6 }}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem wrapper span={{ sm: 6, md: 6 }}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-
-      <GridItem wrapper span={{ sm: 12, md: 4 }} flexShrink={1}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem wrapper span={{ sm: 6, md: 4 }} flexGrow={1}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem wrapper span={{ sm: 6, md: 4 }} flexShrink={1}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-
-      <GridItem wrapper span={{ sm: 12, lg: 3 }}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem wrapper span={{ sm: 6, lg: 3 }}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem wrapper span={{ sm: 6, lg: 3 }}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-      <GridItem wrapper span={{ sm: 12, lg: 3 }}>
-        <Container>
-          <Text>Box</Text>
-        </Container>
-      </GridItem>
-    </Grid>
-  );
-};
-
-export const WithGridItemResponsive = TemplateResponsive.bind({});
-
-WithGridItemResponsive.args = {
-  spacing: 'nano',
-};