@tecsinapse/react-web-kit 1.22.1 → 1.22.3

package/src/components/atoms/Overlay/Overlay.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Transition } from 'react-transition-group';
-import { ZIndex } from '@tecsinapse/react-core';
-import { defaultStyleOverlay, transitionStylesOverlay } from './animations';
-import { StyledOverlay } from './styled';
-
-export interface OverlayProps {
-  timeout?: number;
-  open: boolean;
-  onClose: () => void;
-  zIndex: keyof ZIndex;
-}
-
-const Overlay: React.FC<OverlayProps> = ({
-  timeout = 300,
-  open,
-  onClose,
-  zIndex = 'default',
-  children,
-}) => {
-  return (
-    <Transition in={open} timeout={timeout}>
-      {state => (
-        <StyledOverlay
-          style={{
-            ...defaultStyleOverlay,
-            ...transitionStylesOverlay[state],
-          }}
-          onClick={open ? onClose : undefined}
-          show={open}
-          zIndex={zIndex}
-        >
-          {children}
-        </StyledOverlay>
-      )}
-    </Transition>
-  );
-};
-
-export default Overlay;

package/src/components/atoms/Overlay/animations.ts

@@ -1,12 +0,0 @@
-export const defaultStyleOverlay = {
-  transition: `opacity 800ms ease-in-out, visibility 600ms ease-in-out`,
-  opacity: 0,
-  visibility: 'hidden',
-};
-
-export const transitionStylesOverlay = {
-  entering: { opacity: 1, visibility: 'visible' },
-  entered: { opacity: 1, visibility: 'visible' },
-  exiting: { opacity: 0, visibility: 'visible' },
-  exited: { opacity: 0, visibility: 'hidden' },
-};

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

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

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

@@ -1,20 +0,0 @@
-import styled from '@emotion/styled';
-import { hex2rgba, StyleProps, ZIndex } from '@tecsinapse/react-core';
-
-type InjectedProps = { show: boolean; zIndex: keyof ZIndex };
-
-export const StyledOverlay = styled('div')<Partial<StyleProps> & InjectedProps>`
-  background: ${({ theme }: StyleProps) =>
-    hex2rgba(theme.miscellaneous.overlay, 0.5)};
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  z-index: ${({ theme, zIndex }: StyleProps & InjectedProps) =>
-    theme.zIndex[zIndex]};
-  cursor: ${({ show }) => (show ? 'pointer' : 'default')};
-  position: fixed;
-  align-items: center;
-  justify-content: center;
-`;

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

@@ -1,38 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import Skeleton from './Skeleton';
-import { SkeletonProps } from './Skeleton';
-import { Text, Card } from '@tecsinapse/react-web-kit';
-
-export default {
-  title: 'Web/Skeleton',
-  component: Skeleton,
-};
-
-const Template: Story<SkeletonProps> = args => <Skeleton {...args} />;
-
-export const Base = Template.bind({});
-
-Base.args = { width: 100, height: 50 };
-
-const ChildrenTemplate: Story<SkeletonProps> = args => {
-  return (
-    <Skeleton {...args}>
-      <Card
-        elevated
-        style={{
-          height: '100px',
-          width: '200px',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Text>Skeleton card!</Text>
-      </Card>
-    </Skeleton>
-  );
-};
-
-export const Children = ChildrenTemplate.bind({});
-
-Children.args = { animation: 'pulse' };

package/src/components/atoms/Skeleton/Skeleton.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Wrapper } from './styled';
-import { BorderRadiusType } from '@tecsinapse/react-core';
-import { View } from 'react-native';
-
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-  width?: number;
-  height?: number;
-  animation?: 'pulse' | 'wave';
-  active?: boolean;
-  radius?: BorderRadiusType;
-}
-
-const Skeleton: React.FC<SkeletonProps> = ({
-  children,
-  width,
-  height,
-  animation = 'wave',
-  active = true,
-  radius,
-  ...rest
-}) => {
-  if (!width && !height && !children) {
-    throw new Error(
-      '[Skeleton] You should provide children or specify width and height'
-    );
-  }
-
-  return (
-    <Wrapper
-      width={width}
-      height={height}
-      animation={animation}
-      active={active}
-      radius={radius}
-      {...rest}
-    >
-      <View
-        style={{ opacity: active ? 0 : 1 }}
-        pointerEvents={active ? 'none' : 'auto'}
-      >
-        {children}
-      </View>
-    </Wrapper>
-  );
-};
-
-export default Skeleton;

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

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

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

@@ -1,72 +0,0 @@
-import { css, keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-import { SkeletonProps } from './Skeleton';
-
-const pulseKf = keyframes`
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.1;
-  }
-  100% {
-    opacity: 1;
-  }
-`;
-
-const waveKf = keyframes`
-  0% {
-    transform: translateX(-100%);
-  }
-  50% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-`;
-
-const waveAnim = css`
-  position: relative;
-  overflow: hidden;
-  &::after {
-    animation: ${waveKf} 1.6s linear 0.5s infinite;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      rgba(0, 0, 0, 0.04),
-      transparent
-    );
-    content: '';
-    position: absolute;
-    transform: translateX(-100%);
-    bottom: 0;
-    left: 0;
-    right: 0;
-    top: 0;
-  }
-`;
-
-const pulseAnim = css`
-  animation: ${pulseKf} 1.5s ease-in-out 0.5s infinite;
-`;
-
-export const Wrapper = styled('div')<Partial<StyleProps & SkeletonProps>>`
-  background-color: ${({
-    theme,
-    animation,
-    active,
-  }: StyleProps & Partial<SkeletonProps>) =>
-    !active
-      ? undefined
-      : animation === 'pulse'
-      ? theme.miscellaneous.bodyColor
-      : theme.miscellaneous.surfaceColor};
-  width: ${({ width }) => `${width}px` ?? '100%'};
-  height: ${({ height }) => `${height}px` ?? 'auto'};
-  border-radius: ${({ theme, radius }: StyleProps & Partial<SkeletonProps>) =>
-    radius ? theme.borderRadius[radius] : 'unset'};
-  ${({ animation, active }) =>
-    !active ? undefined : animation === 'pulse' ? pulseAnim : waveAnim};
-`;

package/src/components/atoms/Table/Body/TBody.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-
-const TBody: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
-  children,
-  ...rest
-}) => {
-  return <tbody {...rest}>{children}</tbody>;
-};
-
-export default TBody;

package/src/components/atoms/Table/Body/index.ts

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

package/src/components/atoms/Table/Cell/Td.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { TCell } from './styled';
-
-const Td: React.FC<React.TdHTMLAttributes<HTMLTableCellElement>> = ({
-  children,
-  ...rest
-}) => {
-  return <TCell {...rest}>{children}</TCell>;
-};
-
-export default Td;

package/src/components/atoms/Table/Cell/index.ts

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

package/src/components/atoms/Table/Cell/styled.ts

@@ -1,12 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-
-export const TCell = styled('td')<Partial<StyleProps>>`
-  padding: ${({ theme }) => theme.spacing.deca};
-
-  color: ${({ theme }) => theme.font.color.dark};
-  font-weight: ${({ theme }) => theme.font.weight.bold};
-  font-size: ${({ theme }) => theme.typography.base.fontSize};
-  line-height: ${({ theme }) => theme.typography.base.lineHeight};
-  font-family: ${({ theme }) => theme.font.stack.default};
-`;

package/src/components/atoms/Table/Container/TableContainer.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { TContainer } from './styled';
-
-const TableContainer: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  children,
-  ...rest
-}) => {
-  return <TContainer {...rest}>{children}</TContainer>;
-};
-
-export default TableContainer;

package/src/components/atoms/Table/Container/index.ts

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

package/src/components/atoms/Table/Container/styled.ts

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

package/src/components/atoms/Table/Footer/TFoot.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { TFooter } from './styled';
-
-const TFoot: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
-  children,
-  ...rest
-}) => {
-  return <TFooter {...rest}>{children}</TFooter>;
-};
-
-export default TFoot;

package/src/components/atoms/Table/Footer/index.ts

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

package/src/components/atoms/Table/Footer/styled.ts

@@ -1,8 +0,0 @@
-import styled from '@emotion/styled';
-
-export const TFooter = styled('tfoot')`
-  & > tr {
-    box-shadow: none;
-    border-radius: unset;
-  }
-`;

package/src/components/atoms/Table/Header/THead.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { HeaderBackground, THeadStyled } from './styled';
-import Tr from '../Row/Tr';
-
-const THead: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
-  children,
-  ...rest
-}) => {
-  return (
-    <THeadStyled {...rest}>
-      {children}
-      <Tr>
-        <td colSpan={99}>
-          <HeaderBackground />
-        </td>
-      </Tr>
-    </THeadStyled>
-  );
-};
-
-export default THead;

package/src/components/atoms/Table/Header/Th.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { ThStyled } from './styled';
-
-const Th: React.FC<React.ThHTMLAttributes<HTMLTableHeaderCellElement>> = ({
-  children,
-  ...rest
-}) => {
-  return <ThStyled {...rest}>{children}</ThStyled>;
-};
-
-export default Th;

package/src/components/atoms/Table/Header/index.ts

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

package/src/components/atoms/Table/Header/styled.ts

@@ -1,30 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-
-export const ThStyled = styled('th')<Partial<StyleProps>>`
-  padding: ${({ theme }) => `${theme.spacing.centi} ${theme.spacing.deca}`};
-  color: ${({ theme }) => theme.font.color.medium};
-  font-weight: ${({ theme }) => theme.font.weight.bold};
-  font-size: ${({ theme }) => theme.typography.sub.fontSize};
-  line-height: ${({ theme }) => theme.typography.sub.lineHeight};
-  font-family: ${({ theme }) => theme.font.stack.default};
-
-  text-align: start;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-export const THeadStyled = styled('thead')<Partial<StyleProps>>`
-  & > tr {
-    border-radius: unset;
-    box-shadow: none;
-  }
-`;
-
-export const HeaderBackground = styled('hr')<Partial<StyleProps>>`
-  margin: -51px -25px 4px -25px;
-  height: 42px;
-  background-color: ${({ theme }) => theme.color.secondary.xlight};
-  border: 0;
-`;

package/src/components/atoms/Table/Row/Tr.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { TRow } from './styled';
-
-const Tr: React.FC<React.HTMLAttributes<HTMLTableRowElement>> = ({
-  children,
-  ...rest
-}) => {
-  return <TRow {...rest}>{children}</TRow>;
-};
-
-export default Tr;

package/src/components/atoms/Table/Row/index.ts

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

package/src/components/atoms/Table/Row/styled.ts

@@ -1,8 +0,0 @@
-import styled from '@emotion/styled';
-import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
-
-export const TRow = styled('tr')<Partial<StyleProps>>`
-  box-shadow: 0 2px 8px
-    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
-  border-radius: ${({ theme }) => theme.borderRadius.mili};
-`;

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

@@ -1,96 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import { Icon, Text } from '@tecsinapse/react-core';
-import styled from '@emotion/styled';
-
-import TBody from './Body/TBody';
-import TableContainer from './Container/TableContainer';
-import Th from './Header/Th';
-import Tr from './Row/Tr';
-import Td from './Cell/Td';
-import THead from './Header/THead';
-import Table from './Table';
-import TableToolbar from './Toolbar/TableToolbar';
-import { Input } from '../Input';
-import TFoot from './Footer/TFoot';
-import { Button } from '../Button';
-
-export default {
-  title: 'Web/Table',
-  component: Table,
-};
-
-const TdStyled = styled(Td)`
-  padding: 12px 0 0 0;
-`;
-
-const Template: Story = () => (
-  <TableContainer>
-    <TableToolbar
-      title="Tabela"
-      rightIcons={<Input placeholder="Digite sua busca" />}
-    />
-    <Table>
-      <THead>
-        <Tr>
-          <Th>Coluna 1</Th>
-          <Th>Coluna 2</Th>
-          <Th>Coluna 3</Th>
-          <Th>Coluna 4</Th>
-        </Tr>
-      </THead>
-
-      <TBody>
-        <Tr>
-          <Td>Linha 1</Td>
-          <Td>Linha 1</Td>
-          <Td>Linha 1</Td>
-          <Td>Linha 1</Td>
-        </Tr>
-        <Tr>
-          <Td>Linha 2</Td>
-          <Td>Linha 2</Td>
-          <Td>Linha 2</Td>
-          <Td>Linha 2</Td>
-        </Tr>
-      </TBody>
-      <TFoot>
-        <Tr>
-          <TdStyled colSpan={99}>
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <Button variant="outlined">
-                <Text fontColor="orange" fontWeight="bold">
-                  Exportar
-                </Text>
-              </Button>
-              <div
-                style={{
-                  display: 'flex',
-                  width: 130,
-                  justifyContent: 'space-between',
-                }}
-              >
-                <Button>
-                  <Icon
-                    name={'chevron-left'}
-                    type={'material-community'}
-                    fontColor={'light'}
-                  />
-                </Button>
-                <Button>
-                  <Icon
-                    name={'chevron-right'}
-                    type={'material-community'}
-                    fontColor={'light'}
-                  />
-                </Button>
-              </div>
-            </div>
-          </TdStyled>
-        </Tr>
-      </TFoot>
-    </Table>
-  </TableContainer>
-);
-
-export const Base = Template.bind({});

package/src/components/atoms/Table/Table.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { TableStyled } from './styled';
-
-const Table: React.FC<React.TableHTMLAttributes<HTMLTableElement>> = ({
-  children,
-  ...rest
-}) => {
-  return <TableStyled {...rest}>{children}</TableStyled>;
-};
-
-export default Table;

package/src/components/atoms/Table/Toolbar/TableToolbar.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { TableToolbarStyled } from './styled';
-import { Text } from '@tecsinapse/react-core';
-
-export interface TableToolbarProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  rightIcons?: React.ReactNode;
-  footer?: React.ReactNode;
-  title: string;
-}
-
-const TableToolbar: React.FC<TableToolbarProps> = ({
-  rightIcons,
-  title,
-  footer,
-  ...rest
-}) => {
-  return (
-    <>
-      <TableToolbarStyled {...rest}>
-        <Text typography="h3" fontWeight="bold">
-          {title}
-        </Text>
-        {rightIcons}
-      </TableToolbarStyled>
-      {footer}
-    </>
-  );
-};
-
-export default TableToolbar;

package/src/components/atoms/Table/Toolbar/index.ts

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

package/src/components/atoms/Table/Toolbar/styled.ts

@@ -1,8 +0,0 @@
-import styled from '@emotion/styled';
-
-export const TableToolbarStyled = styled('div')`
-  padding: 0 32px 12px 32px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;

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

@@ -1,9 +0,0 @@
-export { TBody } from './Body';
-export { Td } from './Cell';
-export { TableContainer } from './Container';
-export { TFoot } from './Footer';
-export { THead, Th } from './Header';
-export { Tr } from './Row';
-export { TableToolbar } from './Toolbar';
-export type { TableToolbarProps } from './Toolbar';
-export { default as Table } from './Table';

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

@@ -1,9 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-
-export const TableStyled = styled('table')<Partial<StyleProps>>`
-  width: 100%;
-  min-width: 200px;
-  border-spacing: ${({ theme }) =>
-    `${theme.spacing.kilo} ${theme.spacing.mili}`};
-`;

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

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import { Tag, TagProps } from './index';
-import { IconProps } from '@tecsinapse/react-core';
-
-export default {
-  title: 'Hybrid/Tag',
-  component: Tag,
-  parameters: {
-    backgrounds: {
-      default: 'white',
-    },
-  },
-};
-
-const Template: Story<TagProps> = ({
-  value,
-  icon,
-  variant,
-  dismiss,
-  onDismiss,
-}) => (
-  <Tag
-    value={value}
-    icon={icon}
-    variant={variant}
-    dismiss={dismiss}
-    onDismiss={onDismiss}
-  />
-);
-
-export const Base = Template.bind({});
-
-Base.args = {
-  value: 'Label',
-  icon: { name: 'stopwatch', type: 'fontisto' } as IconProps,
-  variant: 'small',
-  dismiss: true,
-  onDismiss: () => alert('Dismiss'),
-} as TagProps;