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

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { default as Snackbar, SnackbarWebProps } from './Snackbar';
+
+export default {
+  title: 'Hybrid/Snackbar',
+  component: Snackbar,
+};
+
+const Template: Story<SnackbarWebProps> = ({ open: _open, ...args }) => {
+  const [open, isOpen] = React.useState(_open);
+
+  React.useEffect(() => {
+    isOpen(_open);
+  }, [_open]);
+
+  return <Snackbar {...args} open={open} onClose={() => isOpen(false)} />;
+};
+
+export const Base = Template.bind({});
+export const Timeout = Template.bind({});
+
+Base.args = {
+  value: 'Enviado com sucesso!',
+  dismissable: true,
+  colorVariant: 'success',
+  colorTone: 'xlight',
+  textProps: {
+    colorVariant: 'success',
+    colorTone: 'medium',
+  },
+  leftIcon: {
+    name: 'alert-circle-outline',
+    type: 'material-community',
+    colorVariant: 'success',
+    colorTone: 'medium',
+  },
+  rightIcon: {
+    colorTone: 'medium',
+    colorVariant: 'success',
+  },
+};
+
+Timeout.args = {
+  value: 'Falha no envio!',
+  dismissable: true,
+  timeout: 5000,
+  colorVariant: 'error',
+  colorTone: 'xlight',
+  textProps: {
+    colorVariant: 'error',
+    colorTone: 'medium',
+  },
+  leftIcon: {
+    name: 'alert-circle-outline',
+    type: 'material-community',
+    colorVariant: 'error',
+    colorTone: 'medium',
+  },
+  rightIcon: {
+    colorTone: 'medium',
+    colorVariant: 'error',
+  },
+};

package/src/components/molecules/Snackbar/Snackbar.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  SnackbarProps as SnackPropsCore,
+  Text,
+  TextProps,
+} from '@tecsinapse/react-core';
+import { SnackbarStyled } from './styled';
+
+export interface SnackbarWebProps extends Omit<SnackPropsCore, 'children'> {
+  value: string;
+  textProps?: TextProps;
+}
+
+const Snackbar: React.FC<SnackbarWebProps> = ({
+  value,
+  textProps = { colorVariant: 'primary', colorTone: 'medium' },
+  ...rest
+}) => {
+  return (
+    <SnackbarStyled {...rest}>
+      <Text {...textProps} fontWeight="bold" typography="base">
+        {value}
+      </Text>
+    </SnackbarStyled>
+  );
+};
+
+export default Snackbar;

package/src/components/molecules/Snackbar/index.ts

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

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

@@ -0,0 +1,23 @@
+import styled, { css } from '@emotion/native';
+import { Snackbar as SnackbarCore, StyleProps } from '@tecsinapse/react-core';
+
+const baseStyles = () => [
+  css({
+    left: '50%',
+    maxWidth: '600px',
+    transform: [{ translateX: '-50%' as any }],
+  }),
+];
+
+const webStyles = () => [
+  css`
+    position: fixed;
+  `,
+];
+
+export const SnackbarStyled = styled(SnackbarCore)<Partial<StyleProps>>(
+  () => css`
+    ${baseStyles()}
+    ${webStyles()}
+  `
+);

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import TextArea, { TextAreaProps } from './TextArea';
+
+export default {
+  title: 'Hybrid/Text Area',
+  component: TextArea,
+};
+
+const Template: Story<TextAreaProps> = ({ value: _value, ...args }) => {
+  const [value, setValue] = React.useState(_value);
+  return <TextArea {...args} value={value} onChange={arg => setValue(arg)} />;
+};
+
+export const Base = Template.bind({});
+
+Base.args = {
+  value:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar leo vel est egestas laoreet. Nam facilisis, dui vitae convallis convallis, erat felis ornare massa, non auctor libero tortor eu nisi.',
+  numberOfLines: 3,
+  maxLength: 255,
+  label: 'Label',
+  placeholder: 'Placeholder',
+};

package/src/components/molecules/TextArea/TextArea.tsx

@@ -0,0 +1,85 @@
+import React, { FC } from 'react';
+import {
+  useInputFocus,
+  TextAreaProps as ITACore,
+  TextArea as TACore,
+  Text,
+} from '@tecsinapse/react-core';
+import { StyledWebInput } from './styled';
+
+export type TextAreaProps = Omit<ITACore, 'TextComponent' | 'focused'>;
+
+const TextArea: FC<TextAreaProps> = ({
+  label,
+  labelColor,
+  labelColorVariant,
+  labelColorTone,
+  labelTypography,
+  labelStack,
+  labelWeight,
+  leftComponent,
+  rightComponent,
+  disabled,
+  style,
+  borderColor,
+  borderColorGradation,
+  inputFontStack = 'default',
+  inputFontWeight = 'bold',
+  inputContainerStyle,
+  variant = 'default',
+  hintComponent,
+  hint,
+  onFocus,
+  onBlur,
+  value,
+  maxLength,
+  ...rest
+}) => {
+  const { focused, handleBlur, handleFocus } = useInputFocus(
+    onFocus,
+    onBlur,
+    !disabled
+  );
+
+  return (
+    <TACore
+      label={label}
+      labelColor={labelColor}
+      labelColorVariant={labelColorVariant}
+      labelColorTone={labelColorTone}
+      labelTypography={labelTypography}
+      labelStack={labelStack}
+      labelWeight={labelWeight}
+      LabelComponent={Text}
+      leftComponent={leftComponent}
+      rightComponent={rightComponent}
+      borderColor={borderColor}
+      borderColorGradation={borderColorGradation}
+      inputContainerStyle={inputContainerStyle}
+      focused={focused}
+      disabled={disabled}
+      variant={variant}
+      value={value}
+      hintComponent={hintComponent}
+      hint={hint}
+      style={style}
+      TextComponent={Text}
+      maxLength={maxLength}
+    >
+      <StyledWebInput
+        {...rest}
+        fontStack={inputFontStack}
+        fontWeight={inputFontWeight}
+        disabled={disabled}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        textAlignVertical={'top'}
+        multiline
+        value={value}
+        maxLength={maxLength}
+      />
+    </TACore>
+  );
+};
+
+export default TextArea;

package/src/components/molecules/TextArea/index.ts

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

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

@@ -0,0 +1,23 @@
+import styled from '@emotion/native';
+import {
+  FontStackType,
+  FontWeightType,
+  StyleProps,
+  TextAreaInputBase,
+} from '@tecsinapse/react-core';
+import { TextAreaProps } from './TextArea';
+
+interface Font {
+  fontStack?: FontStackType;
+  fontWeight?: FontWeightType;
+}
+
+export const StyledWebInput = styled(TextAreaInputBase)<
+  Font & Partial<TextAreaProps> & Partial<StyleProps>
+>`
+  font-weight: ${({ theme, fontWeight = 'regular' }) =>
+    theme.font.weight[fontWeight]};
+  font-family: ${({ theme, fontStack = 'default' }) =>
+    `'${theme.font.stack[fontStack]}'`};
+  outline-width: 0;
+`;

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

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

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