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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,198 @@
+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',
+};

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { GridItem } from './Item';
+import { IGrid } from '@tecsinapse/react-core';
+
+export type IGridWeb = IGrid &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+
+const Grid = ({
+  children,
+  columns = 12,
+  layout,
+  style,
+  spacing,
+  ...rest
+}: IGridWeb): JSX.Element => {
+  if (layout) {
+    const flatLayout = layout.flat();
+    return (
+      <div
+        style={{
+          ...style,
+          display: 'flex',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+        }}
+        {...rest}
+      >
+        {React.Children.map(children, (child, index) => (
+          <GridItem
+            key={`child-${index}`}
+            columns={columns}
+            span={flatLayout[index]}
+            spacing={spacing}
+          >
+            {child}
+          </GridItem>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        ...style,
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+      }}
+      {...rest}
+    >
+      {React.Children.map(children, (child, index) => {
+        return React.cloneElement(child, {
+          ...child?.props,
+          columns,
+          spacing: child?.props.spacing ?? spacing,
+          key: `child-${index}`,
+        });
+      })}
+    </div>
+  );
+};
+
+export default Grid;