@tecsinapse/react-web-kit 1.3.2 → 1.6.1

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export 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.08)};
+  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';
+
+export 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,10 @@
+import React from 'react';
+import { ThStyled } from './styled';
+
+export 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';
+
+export 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.08)};
+  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: 'Components/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';
+
+export 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 @@
+export { default as TableToolbar, 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,8 @@
+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, 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/molecules/Drawer/Drawer.stories.tsx

@@ -8,35 +8,34 @@ import { default as Drawer, DrawerProps } from './Drawer';
 export default {
   title: 'Components/Drawer',
   component: Drawer,
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 const Template: Story<DrawerProps> = ({ anchorPosition, open }) => {
   const [isOpen, setOpen] = React.useState<boolean>(open);
 
-  const onClose = () => {
+  const toggleOpen = () => {
     setOpen(!isOpen);
   };
 
   return (
     <>
-      <Drawer open={isOpen} onClose={onClose} anchorPosition={anchorPosition}>
+      <Drawer
+        open={isOpen}
+        onClose={toggleOpen}
+        anchorPosition={anchorPosition}
+      >
         <StyledHeaderDrawerStory>
-          <Text typography="h4">Design System</Text>
+          <StyledTextHeader typography="h4">Design System</StyledTextHeader>
           <StyledHButtonHeaderStory>
-            <Button size="small" onPress={onClose} variant="text">
+            <Button size="small" onPress={toggleOpen} variant="text">
               <Icon name="close" type="material-community" />
             </Button>
           </StyledHButtonHeaderStory>
         </StyledHeaderDrawerStory>
       </Drawer>
-      <StyledContainerButtonStory>
-        <Button onPress={onClose}>
-          <Text fontColor="light">Open Drawer</Text>
-        </Button>
-      </StyledContainerButtonStory>
+      <Button onPress={toggleOpen}>
+        <StyledTextButton fontColor="light">Open Drawer</StyledTextButton>
+      </Button>
     </>
   );
 };
@@ -48,15 +47,6 @@ Base.args = {
   open: false,
 };
 
-const StyledContainerButtonStory = styled('div')`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-`;
-
 const StyledHeaderDrawerStory = styled('div')`
   display: flex;
   flex-direction: row;
@@ -68,3 +58,11 @@ const StyledHeaderDrawerStory = styled('div')`
 const StyledHButtonHeaderStory = styled('div')`
   margin-left: 10px;
 `;
+
+const StyledTextButton = styled(Text)`
+  user-select: none;
+`;
+
+const StyledTextHeader = styled(Text)`
+  white-space: nowrap;
+`;