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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+  Text,
+  Tag as TagCore,
+  TagProps as TagCoreProps,
+  TextProps,
+} from '@tecsinapse/react-core';
+
+export interface TagProps extends Omit<TagCoreProps, 'value'> {
+  value: string;
+  textProps?: TextProps;
+}
+
+const Tag: React.FC<TagProps> = ({
+  value,
+  textProps,
+  ...rest
+}): JSX.Element => {
+  const {
+    colorVariant = 'secondary',
+    colorTone = 'dark',
+    fontStack = 'default',
+    fontWeight = 'bold',
+  } = textProps || {};
+  return (
+    <TagCore
+      value={
+        <Text
+          colorVariant={colorVariant}
+          colorTone={colorTone}
+          fontStack={fontStack}
+          fontWeight={fontWeight}
+          typography={rest.variant === 'small' ? 'sub' : 'base'}
+        >
+          {value}
+        </Text>
+      }
+      {...rest}
+    />
+  );
+};
+
+export default Tag;

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

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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import Tooltip, { ITooltip } from './Tooltip';
+import { Button } from '../Button';
+import { Text } from '@tecsinapse/react-core';
+
+export default {
+  title: 'Web/Tooltip',
+  component: Tooltip,
+};
+
+const Template: Story<ITooltip> = args => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <Tooltip {...args}>
+        <Button>
+          <Text fontColor="light" fontWeight="bold">
+            Hover me
+          </Text>
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+export const Base = Template.bind({});
+
+Base.args = {
+  title: 'Tooltip',
+};