@tecsinapse/react-web-kit 1.3.2 → 1.6.1

package/src/components/molecules/Select/SelectItem/SelectItem.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Checkbox, Text } from '@tecsinapse/react-core';
+import {
+  ContainerItemSelect,
+  StyledContainerTextLabel,
+  StyledSpan,
+} from './styled';
+
+interface SelectItemProps<Data, Type extends 'single' | 'multi'> {
+  item: Data;
+  type: Type;
+  value: Type extends 'single' ? Data | undefined : Data[];
+  onSelect: (
+    option: Type extends 'single' ? Data | undefined : Data[]
+  ) => never | void;
+  keyExtractor: (t: Data, index: number) => string;
+  labelExtractor: (t: Data) => string;
+  index: number;
+}
+
+const SelectItem = <Data, Type extends 'single' | 'multi'>({
+  item,
+  onSelect,
+  type,
+  value,
+  labelExtractor,
+  setDropDownVisible,
+  checkedAll,
+  setCheckedAll,
+  lenghtOptions,
+}: SelectItemProps<Data, Type> & {
+  setDropDownVisible: (t: boolean) => void;
+  checkedAll: boolean;
+  setCheckedAll: (t: boolean) => void;
+  lenghtOptions: number;
+}): JSX.Element => {
+  const isMulti = type === 'multi';
+  const [checked, setChecked] = React.useState<boolean>(
+    value !== undefined && type === 'multi' && (value as Data[]).includes(item)
+  );
+  React.useEffect(() => {
+    if (type === 'multi') {
+      checkedAll
+        ? setChecked(true)
+        : setChecked((value as Data[]).includes(item));
+    }
+  }, [checkedAll]);
+
+  const clickItem = item => {
+    // TS Workaround since TS won't infer the ternary operator's result type correctly
+    type OnSelectArg = Parameters<typeof onSelect>[0];
+    const key: Data = item;
+    if (Array.isArray(value)) {
+      const auxChecked = !checked;
+      setChecked(!checked);
+      if (auxChecked) {
+        onSelect([...value, key] as OnSelectArg);
+        [...value, key].length === lenghtOptions && setCheckedAll(true);
+      } else {
+        const auxArray: Data[] = value;
+        const indexToExclude = auxArray.indexOf(key);
+        auxArray.splice(indexToExclude, 1);
+        onSelect([...auxArray] as OnSelectArg);
+        setCheckedAll(false);
+      }
+    } else {
+      onSelect(key as OnSelectArg);
+      setDropDownVisible(false);
+    }
+  };
+
+  return (
+    <ContainerItemSelect onClick={() => clickItem(item)}>
+      {isMulti && (
+        <Checkbox checked={checked} onChange={() => clickItem(item)} />
+      )}
+      <StyledContainerTextLabel>
+        <Text fontWeight="bold" ellipsizeMode="tail" numberOfLines={1}>
+          <StyledSpan singleHighligh={type === 'single' && value === item}>
+            {labelExtractor(item)}
+          </StyledSpan>
+        </Text>
+      </StyledContainerTextLabel>
+    </ContainerItemSelect>
+  );
+};
+
+export default SelectItem;

package/src/components/molecules/Select/SelectItem/index.ts

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

package/src/components/molecules/Select/SelectItem/styled.ts

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { StyleProps } from '@tecsinapse/react-core';
+
+export const ContainerItemSelect = styled('div')<Partial<StyleProps>>`
+  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ theme }) => theme.color.primary.xlight};
+  }
+  &:hover span {
+    color: ${({ theme }) => theme.color.primary.medium};
+  }
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const StyledSpan = styled('span')<
+  Partial<StyleProps> & { singleHighligh: boolean }
+>`
+  color: ${({ theme, singleHighligh }) =>
+    singleHighligh ? theme.color.primary.medium : theme.color.secondary.xdark};
+  padding: ${({ theme }) => `${theme.spacing.mili} 0px`};
+`;
+
+export const StyledContainerTextLabel = styled('div')<Partial<StyleProps>>`
+  padding-left: ${({ theme }) => theme.spacing.mili};
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;

package/src/components/molecules/Select/animations.ts

@@ -0,0 +1,18 @@
+export const defaultStyles = {
+  transition: [
+    'transform 200ms ease-in-out, opacity 200ms ease-in-out, visibility 200ms ease-in-out',
+  ],
+  overflow: 'hidden',
+  visibility: 'hidden',
+};
+
+export const transition = {
+  entering: {
+    transform: 'translateY(-10%)',
+    opacity: 0,
+    visibility: 'hidden',
+  },
+  entered: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },
+  exiting: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },
+  exited: { transform: 'translateY(-10%)', opacity: 0, visibility: 'hidden' },
+};

package/src/components/molecules/Select/functions.ts

@@ -0,0 +1,32 @@
+export const getDisplayValue = <Data>(
+  type,
+  value,
+  options,
+  placeholder,
+  keyExtractor,
+  labelExtractor
+): Data | Data[] => {
+  if (type === 'multi') {
+    if (value.length === 0) return placeholder;
+    else {
+      return options
+        .reduce(
+          (acc, option, index) =>
+            value.find(
+              key => keyExtractor(option, index) == keyExtractor(key, index)
+            )
+              ? acc + labelExtractor(option) + ', '
+              : acc,
+          ''
+        )
+        .slice(0, -2);
+    }
+  } else {
+    if (value === undefined) return placeholder;
+    const selectedOption = options.find(
+      (option, index) =>
+        keyExtractor(option, index) == keyExtractor(value as Data, index)
+    );
+    return selectedOption ? labelExtractor(selectedOption) : placeholder;
+  }
+};

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

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

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

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+import { StyleProps } from '@tecsinapse/react-core';
+
+export const StyledContainer = styled('div')<Partial<StyleProps>>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+`;
+
+export const StyledInputContainer = styled('div')<Partial<StyleProps>>`
+  width: 100%;
+  z-index: ${({ theme }) => theme.zIndex.input};
+`;

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

@@ -18,9 +18,11 @@ const Template: Story<SnackbarWebProps> = ({ open: _open, ...args }) => {
 };
 
 export const Base = Template.bind({});
+export const Timeout = Template.bind({});
 
 Base.args = {
   value: 'Enviado com sucesso!',
+  dismissable: true,
   colorVariant: 'success',
   colorTone: 'xlight',
   textProps: {
@@ -38,3 +40,25 @@ Base.args = {
     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/organisms/DataGrid/DatGrid.stories.tsx

@@ -0,0 +1,216 @@
+import React, { useState } from 'react';
+import { Story } from '@storybook/react';
+import {
+  GroupButton,
+  GroupButtonOption,
+  GroupButtonValue,
+  Icon,
+} from '@tecsinapse/react-core';
+import DataGrid from './DataGrid';
+import { Input } from '../../atoms/Input';
+import { Skeleton } from '../../atoms/Skeleton';
+import { HeadersType } from './types';
+
+export default {
+  title: 'Components/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,
+};