@tecsinapse/react-web-kit 1.22.1 → 1.22.3

package/src/components/organisms/DataGrid/DatGrid.stories.tsx

@@ -1,249 +0,0 @@
-import React, { useState } from 'react';
-import { Story } from '@storybook/react';
-import {
-  GroupButton,
-  GroupButtonOption,
-  GroupButtonValue,
-  Icon,
-  Text,
-} from '@tecsinapse/react-core';
-import DataGrid from './DataGrid';
-import { Input } from '../../atoms/Input';
-import { Skeleton } from '../../atoms/Skeleton';
-import { HeadersType } from './types';
-import styled from '@emotion/styled';
-
-export default {
-  title: 'Web/Data Grid',
-  component: DataGrid,
-};
-
-const options: GroupButtonValue<string>[] = [
-  { value: 'Filter 1' },
-  { value: 'Filter 2' },
-];
-
-const ToolbarFooterComponent = React.memo(() => {
-  const [active, setActive] = useState<string>(options[0].value);
-  return (
-    <>
-      <hr
-        style={{
-          height: 1,
-          backgroundColor: '#C2BFBC',
-          border: 0,
-          opacity: 0.15,
-          margin: 0,
-        }}
-      />
-      <div style={{ padding: '12px 32px 6px' }}>
-        <GroupButton
-          value={active}
-          options={options}
-          renderKey={option => option}
-          renderOption={(option, active) => (
-            <GroupButtonOption active={active} description={option} />
-          )}
-          onChange={setActive}
-        />
-      </div>
-    </>
-  );
-});
-
-const ToolbarRightComponent = React.memo(() => {
-  return (
-    <Input
-      leftComponent={
-        <div style={{ margin: '0 8px' }}>
-          <Icon
-            name={'magnify'}
-            type={'material-community'}
-            colorVariant="secondary"
-          />
-        </div>
-      }
-      placeholder="Search term"
-      placeholderTextColor="#85807A"
-    />
-  );
-});
-
-const SkeletonPlaceholder = React.memo(() => (
-  <Skeleton height={55} radius="mili" animation="wave">
-    <div style={{ width: '100%', minWidth: 650 }} />
-  </Skeleton>
-));
-
-type ExampleData = {
-  id: number;
-  name: string;
-  username: string;
-  email: string;
-};
-
-const fetchUsers = async (page = 0, rowsPerPage = 5) => {
-  return await fetch(
-    `https://jsonplaceholder.typicode.com/users?_start=${
-      page * rowsPerPage
-    }&_limit=${rowsPerPage}`,
-    { method: 'GET' }
-  );
-};
-
-const HEADERS: HeadersType<ExampleData>[] = [
-  { label: 'ID', render: data => data.id },
-  {
-    label: 'Name',
-    render: data => data.name,
-    sort: direction => {
-      alert(`sorting in: ${direction}`);
-    },
-  },
-  { label: 'Username', render: data => data.username },
-  { label: 'Email', render: data => data.email },
-];
-
-const Template: Story = args => {
-  const [selected, setSelected] = React.useState<ExampleData[]>([]);
-  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
-  const [currentPage, setCurrentPage] = React.useState<number>(0);
-  const [totalCount, setTotalCount] = React.useState<number>(0);
-  const [loading, setLoading] = React.useState<boolean>(true);
-  const [data, setData] = React.useState<ExampleData[]>([]);
-
-  React.useEffect(() => {
-    fetchUsers(currentPage, rowsPerPage)
-      .then(async data => {
-        setTotalCount(parseInt(data.headers.get('X-Total-Count') ?? '0'));
-        const json = await data.json();
-        setData(json);
-      })
-      .finally(() => setLoading(false));
-  }, []);
-
-  React.useEffect(() => {
-    setLoading(true);
-    fetchUsers(currentPage, rowsPerPage)
-      .then(async data => {
-        const json = await data.json();
-        setData(json);
-      })
-      .finally(() => setLoading(false));
-  }, [rowsPerPage, currentPage]);
-
-  const rowsPerPageOptions = React.useMemo(() => [5, 25, 50], []);
-  const rowKeyExtractor = React.useCallback(data => String(data.id), []);
-
-  return (
-    <DataGrid
-      headers={HEADERS}
-      data={data}
-      rowKeyExtractor={rowKeyExtractor}
-      toolbarTitle="Server Side"
-      toolbarRightIcons={<ToolbarRightComponent />}
-      toolbarFooter={<ToolbarFooterComponent />}
-      selectedRows={selected}
-      onSelectedRows={setSelected}
-      rowsPerPage={rowsPerPage}
-      rowsPerPageOptions={rowsPerPageOptions}
-      onRowsPerPageChange={setRowsPerPage}
-      page={currentPage}
-      onPageChange={setCurrentPage}
-      loading={loading}
-      rowsCount={totalCount}
-      skeletonComponent={<SkeletonPlaceholder />}
-      {...args}
-    />
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  selectable: true,
-  exportFunction: () => alert('Export handler'),
-  pagination: true,
-};
-
-const fetchAllUsers = async () => {
-  return await fetch(`https://jsonplaceholder.typicode.com/users`, {
-    method: 'GET',
-  });
-};
-
-const TemplateClient: Story = args => {
-  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);
-  const [currentPage, setCurrentPage] = React.useState<number>(0);
-  const [loading, setLoading] = React.useState<boolean>(true);
-  const [data, setData] = React.useState<ExampleData[]>([]);
-
-  React.useEffect(() => {
-    fetchAllUsers()
-      .then(async data => {
-        const json = await data.json();
-        setData(json);
-      })
-      .finally(() => setLoading(false));
-  }, []);
-
-  const rowKeyExtractor = React.useCallback(data => String(data.id), []);
-  const rowsPerPageOptions = React.useMemo(() => [5, 25, 50], []);
-
-  return (
-    <DataGrid
-      headers={HEADERS}
-      data={data}
-      rowKeyExtractor={rowKeyExtractor}
-      toolbarTitle="Client Side"
-      toolbarRightIcons={<ToolbarRightComponent />}
-      toolbarFooter={<ToolbarFooterComponent />}
-      rowsPerPage={rowsPerPage}
-      rowsPerPageOptions={rowsPerPageOptions}
-      onRowsPerPageChange={setRowsPerPage}
-      page={currentPage}
-      onPageChange={setCurrentPage}
-      loading={loading}
-      skeletonComponent={<SkeletonPlaceholder />}
-      {...args}
-    />
-  );
-};
-
-export const ClientSide = TemplateClient.bind({});
-
-ClientSide.args = {
-  exportFunction: () => alert('Export handler'),
-  pagination: true,
-};
-
-const EmptyContainer = styled('div')`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const EmptyState = React.memo(() => (
-  <EmptyContainer>
-    <Icon name="eye-off-outline" type={'material-community'} size={'mega'} />
-    <Text typography="h2" fontWeight="bold">
-      There is nothing to see
-    </Text>
-    <Text typography="h5">You may have to take another action first</Text>
-  </EmptyContainer>
-));
-
-const TemplateEmpty: Story = args => {
-  return (
-    <DataGrid
-      headers={HEADERS}
-      data={[]}
-      rowKeyExtractor={() => ''}
-      toolbarTitle="Empty Grid"
-      emptyPlaceholder={<EmptyState />}
-      {...args}
-    />
-  );
-};
-
-export const EmptyGrid = TemplateEmpty.bind({});

package/src/components/organisms/DataGrid/DataGrid.tsx

@@ -1,199 +0,0 @@
-import React from 'react';
-import {
-  Table,
-  TableToolbar,
-  TableContainer,
-  Tr,
-  Td,
-  TBody,
-} from '../../atoms/Table';
-import { Header } from './Header';
-import { Row } from './Row';
-import { HeadersType } from './types';
-import { Footer } from './Footer';
-import { Skeleton } from '../../atoms/Skeleton';
-import { getData, removeElement } from './utils';
-
-export interface DataGridProps<Data>
-  extends React.HTMLAttributes<HTMLDivElement> {
-  headers: HeadersType<Data>[];
-  data: Data[];
-  /** Unique identifier for row data */
-  rowKeyExtractor: (data: Data) => string;
-  toolbarRightIcons?: React.ReactNode;
-  toolbarFooter?: React.ReactNode;
-  toolbarTitle: string;
-  /** Enable rows selection */
-  selectable?: boolean;
-  /** Selected items */
-  selectedRows?: Data[];
-  /** Selection handler */
-  onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;
-  /** Shows pagination controls */
-  pagination?: boolean;
-  /** Results per page */
-  rowsPerPage?: number;
-  /** Results per page handler */
-  onRowsPerPageChange?: (value: number) => void;
-  rowsPerPageOptions?: number[];
-  rowsPerPageLabel?: (value: number) => string;
-  /** Export button label */
-  exportLabel?: string;
-  exportFunction?: () => void;
-  /** Total data elements. Only specify this property if your data is server-side */
-  rowsCount?: number;
-  /** Current page. Always start in 0 */
-  page?: number;
-  /** Current page handler */
-  onPageChange?: (page: number) => void;
-  /** Loading state. The amount of skeleton rows is based on current rowsPerPage */
-  loading?: boolean;
-  /** Custom skeleton component for better visual */
-  skeletonComponent?: React.ReactNode;
-  /** Empty state placeholder */
-  emptyPlaceholder?: React.ReactNode;
-  /** Export component, use if default button with label is not ideal. This prop, not receive "exportLabel" and "exportFunction" */
-  exportComponent?: React.ReactNode;
-}
-
-/** Note: Consider memoizing functions for a better performance */
-const DataGrid = <Data,>({
-  headers,
-  data,
-  rowKeyExtractor,
-  toolbarTitle,
-  toolbarFooter,
-  toolbarRightIcons,
-  selectable = false,
-  selectedRows = [],
-  onSelectedRows,
-  pagination = false,
-  rowsPerPage = 10,
-  onRowsPerPageChange,
-  rowsPerPageOptions: _rowsPerPageOptions,
-  rowsPerPageLabel: _rowsPerPageLabel,
-  exportLabel = 'Exportar',
-  exportFunction,
-  rowsCount,
-  page = 0,
-  onPageChange,
-  loading = false,
-  skeletonComponent,
-  emptyPlaceholder,
-  exportComponent,
-  ...rest
-}: DataGridProps<Data>): JSX.Element => {
-  if (selectable && (!selectedRows || !onSelectedRows)) {
-    throw new Error(
-      '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'
-    );
-  }
-
-  const rowsPerPageLabel = React.useCallback(
-    value =>
-      _rowsPerPageLabel
-        ? _rowsPerPageLabel(value)
-        : `Exibir por página: ${value} itens`,
-    [_rowsPerPageLabel]
-  );
-  const rowsPerPageOptions = React.useMemo(
-    () => _rowsPerPageOptions ?? [10, 25, 50],
-    [_rowsPerPageOptions]
-  );
-
-  const handleSelect = React.useCallback(
-    (current, checked) => {
-      if (checked) {
-        onSelectedRows?.(prevState => [...prevState, current]);
-        return;
-      }
-
-      onSelectedRows?.(prevState => {
-        const idx = prevState.findIndex(
-          el => rowKeyExtractor(el) === rowKeyExtractor(current)
-        );
-        return [...removeElement(prevState, idx)];
-      });
-    },
-    [onSelectedRows, rowKeyExtractor]
-  );
-
-  return (
-    <TableContainer {...rest}>
-      <TableToolbar
-        title={toolbarTitle}
-        rightIcons={toolbarRightIcons}
-        footer={toolbarFooter}
-      />
-      <Table>
-        <Header
-          selectable={selectable}
-          headers={headers}
-          data={data}
-          rowsCount={rowsCount ?? data.length}
-          rowKeyExtractor={rowKeyExtractor}
-          selectedRows={selectedRows}
-          onSelected={onSelectedRows}
-        />
-
-        {!loading ? (
-          <TBody>
-            {data.length > 0 ? (
-              getData(data, rowsCount, page, rowsPerPage, pagination).map(
-                item => (
-                  <Row
-                    key={rowKeyExtractor(item)}
-                    rowKeyExtractor={rowKeyExtractor}
-                    handleSelect={handleSelect}
-                    selectable={selectable}
-                    headers={headers}
-                    data={item}
-                    checked={selectedRows?.some(
-                      sel => rowKeyExtractor(sel) === rowKeyExtractor(item)
-                    )}
-                  />
-                )
-              )
-            ) : (
-              <tr>
-                <td colSpan={99}>{emptyPlaceholder}</td>
-              </tr>
-            )}
-          </TBody>
-        ) : (
-          <TBody>
-            {[...Array(rowsPerPage).keys()].map(idx => (
-              <Tr key={`skeleton-${idx}`}>
-                <Td colSpan={99} style={{ padding: 0 }}>
-                  {skeletonComponent ?? (
-                    <Skeleton height={55} radius="mili" animation="wave">
-                      <div style={{ width: '100%' }} />
-                    </Skeleton>
-                  )}
-                </Td>
-              </Tr>
-            ))}
-          </TBody>
-        )}
-
-        {(Number(rowsCount) > 0 || data.length > 0) && (
-          <Footer
-            exportFunction={exportFunction}
-            exportLabel={exportLabel}
-            rowsPerPageLabel={rowsPerPageLabel}
-            rowsPerPage={rowsPerPage}
-            onRowsPerPageChange={onRowsPerPageChange}
-            rowsPerPageOptions={rowsPerPageOptions}
-            rowsCount={rowsCount ?? data.length}
-            page={page}
-            onPageChange={onPageChange}
-            pagination={pagination}
-            exportComponent={exportComponent}
-          />
-        )}
-      </Table>
-    </TableContainer>
-  );
-};
-
-export default DataGrid;

package/src/components/organisms/DataGrid/Footer/Footer.tsx

@@ -1,164 +0,0 @@
-import React from 'react';
-import { Button } from '../../../atoms/Button';
-import { Icon, Text } from '@tecsinapse/react-core';
-import { Select } from '../../../molecules/Select';
-import { TFoot, Tr } from '../../../atoms/Table';
-import {
-  FooterContainer,
-  FooterContainerEnd,
-  FooterContainerStart,
-  HoveredText,
-  NavigationButton,
-  PageButton,
-  PagesContainer,
-  SelectContainer,
-  TdFooterStyled,
-  TextPagination,
-} from './styled';
-
-interface DataGridFooterProps {
-  rowsPerPage: number;
-  onRowsPerPageChange?: (value: number) => void;
-  rowsPerPageOptions: number[];
-  rowsPerPageLabel: (value: number) => string;
-  exportLabel?: string;
-  exportFunction?: () => void;
-  /** Total data elements */
-  rowsCount: number;
-  page: number;
-  onPageChange?: (page: number) => void;
-  pagination: boolean;
-  exportComponent?: React.ReactNode;
-}
-
-const Footer: React.FC<DataGridFooterProps> = ({
-  rowsPerPage,
-  onRowsPerPageChange,
-  rowsPerPageOptions,
-  rowsPerPageLabel,
-  exportFunction,
-  exportLabel,
-  rowsCount,
-  page,
-  onPageChange,
-  pagination,
-  exportComponent,
-}) => {
-  if (pagination && (!onPageChange || !onRowsPerPageChange)) {
-    throw new Error(
-      '[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)'
-    );
-  }
-
-  const getPaginationSlice = (): { start: number; end: number } => {
-    const totalPages = Math.ceil(rowsCount / rowsPerPage);
-    if (totalPages < 4) {
-      return { start: 0, end: totalPages };
-    }
-    if (page === 0) {
-      return { start: page, end: page + 3 };
-    }
-    if (page === totalPages - 1) {
-      return { start: page - 2, end: page + 1 };
-    }
-    return { start: page - 1, end: page + 2 };
-  };
-
-  const handleRowsPerPage = React.useCallback(
-    value => {
-      onRowsPerPageChange?.(value as number);
-      onPageChange?.(0);
-    },
-    [onPageChange, onRowsPerPageChange]
-  );
-  const currentInitItem = page * rowsPerPage + 1;
-  const currentFinalItem =
-    (page + 1) * rowsPerPage > rowsCount ? rowsCount : (page + 1) * rowsPerPage;
-
-  return (
-    <TFoot>
-      <Tr>
-        <TdFooterStyled colSpan={99}>
-          <FooterContainer>
-            <FooterContainerStart>
-              {pagination && (
-                <SelectContainer>
-                  <Select
-                    options={rowsPerPageOptions}
-                    onSelect={handleRowsPerPage}
-                    value={rowsPerPage}
-                    type={'single'}
-                    keyExtractor={value => String(value)}
-                    labelExtractor={rowsPerPageLabel}
-                    anchor="top"
-                  />
-                </SelectContainer>
-              )}
-              {exportComponent && !exportFunction && <>{exportComponent}</>}
-              {exportFunction && (
-                <HoveredText>
-                  <Button variant="outlined" onPress={() => exportFunction()}>
-                    <Text fontColor="orange" fontWeight="bold">
-                      {exportLabel}
-                    </Text>
-                  </Button>
-                </HoveredText>
-              )}
-            </FooterContainerStart>
-            {pagination && (
-              <>
-                <TextPagination
-                  fontWeight={'bold'}
-                  fontColor={'medium'}
-                >{`Exibindo ${currentInitItem} a ${currentFinalItem} de ${rowsCount} registros`}</TextPagination>
-                <FooterContainerEnd>
-                  <NavigationButton
-                    onPress={() => onPageChange?.(page - 1)}
-                    disabled={page === 0}
-                  >
-                    <Icon
-                      name={'chevron-left'}
-                      type={'material-community'}
-                      fontColor={'light'}
-                    />
-                  </NavigationButton>
-                  <PagesContainer>
-                    {[...Array(Math.ceil(rowsCount / rowsPerPage)).keys()]
-                      .slice(
-                        getPaginationSlice().start,
-                        getPaginationSlice().end
-                      )
-                      .map(value => (
-                        <HoveredText key={`page-${value}`}>
-                          <PageButton
-                            variant={page === value ? 'outlined' : 'text'}
-                            onPress={() => onPageChange?.(value)}
-                          >
-                            <Text fontColor="medium" fontWeight="bold">
-                              {value + 1}
-                            </Text>
-                          </PageButton>
-                        </HoveredText>
-                      ))}
-                  </PagesContainer>
-                  <NavigationButton
-                    onPress={() => onPageChange?.(page + 1)}
-                    disabled={page === Math.ceil(rowsCount / rowsPerPage) - 1}
-                  >
-                    <Icon
-                      name={'chevron-right'}
-                      type={'material-community'}
-                      fontColor={'light'}
-                    />
-                  </NavigationButton>
-                </FooterContainerEnd>
-              </>
-            )}
-          </FooterContainer>
-        </TdFooterStyled>
-      </Tr>
-    </TFoot>
-  );
-};
-
-export default React.memo(Footer);

package/src/components/organisms/DataGrid/Footer/index.ts

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

package/src/components/organisms/DataGrid/Footer/styled.ts

@@ -1,67 +0,0 @@
-import styled from '@emotion/styled';
-import { default as nativeStyled } from '@emotion/native';
-import { StyleProps, Text } from '@tecsinapse/react-core';
-import { Td } from '../../../atoms/Table';
-import { Button } from '../../../atoms/Button';
-
-export const TdFooterStyled = styled(Td)<Partial<StyleProps>>`
-  padding: ${({ theme }) => theme.spacing.centi} 0 0 0;
-`;
-
-export const FlexContainer = styled('div')`
-  display: flex;
-  flex-grow: 1;
-`;
-
-export const FooterContainer = styled(FlexContainer)`
-  justify-content: space-between;
-  align-items: center;
-`;
-
-export const FooterContainerStart = styled(FlexContainer)`
-  justify-content: flex-start;
-`;
-
-export const FooterContainerEnd = styled(FlexContainer)`
-  justify-content: flex-end;
-`;
-
-export const SelectContainer = styled('div')<Partial<StyleProps>>`
-  margin-right: ${({ theme }) => theme.spacing.deca};
-`;
-
-export const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`    
-    border-radius: ${({ theme }) => theme.borderRadius.mili};
-    height: 44px;
-    justify-content: center;
-    padding: ${({ theme }) => theme.spacing.centi};
-    width: 44px;  
-`;
-
-// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text
-export const PageButton = nativeStyled(NavigationButton)<Partial<StyleProps>>`
-    padding-right: ${({ theme }) => theme.spacing.deca};
-    padding-left: ${({ theme }) => theme.spacing.deca};
-    border-radius: ${({ theme }) => theme.borderRadius.mili};
-    justify-content: center;
-    margin-left: ${({ theme }) => theme.spacing.micro};
-    margin-right: ${({ theme }) => theme.spacing.micro};
-`;
-
-export const PagesContainer = styled('div')<Partial<StyleProps>>`
-  margin: 0 20px;
-  display: flex;
-`;
-
-export const HoveredText = styled('div')<Partial<StyleProps>>`
-  user-select: none;
-  &:hover * {
-    color: ${({ theme }) => theme.font.color.light};
-  }
-`;
-
-export const TextPagination = nativeStyled(Text)<Partial<StyleProps>>`
-  padding-right: ${({ theme }) => theme.spacing.deca};
-  padding-left: ${({ theme }) => theme.spacing.deca};
-
-`;