@tecsinapse/react-web-kit 1.22.1 → 1.22.3

package/src/components/molecules/Masonry/Masonry.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { SpacingType } from '@tecsinapse/react-core';
-import { StyledColumnItem, StyledRowItem, StyledMasonry } from './styled';
-
-export interface MasonryProps {
-  columns: number;
-  /** Spacing to the left of every block on index % column !== 0 */
-  spacingLeft: SpacingType;
-  /** Spacing to the top of every block on index >= column */
-  spacingTop: SpacingType;
-}
-
-const Masonry: React.FC<MasonryProps> = ({
-  children,
-  columns,
-  spacingTop,
-  spacingLeft,
-}) => {
-  const getColumns = () => {
-    const columnsArray: React.ReactNode[][] = Array.from(
-      { length: columns },
-      () => []
-    );
-
-    React.Children.forEach(children, (child, index) => {
-      if (child && React.isValidElement(child)) {
-        columnsArray[index % columns].push(child);
-      }
-    });
-
-    return columnsArray;
-  };
-
-  const renderColumn = column => {
-    return column.map((item, index) => (
-      <StyledRowItem key={index} index={index} spacingTop={spacingTop}>
-        {item}
-      </StyledRowItem>
-    ));
-  };
-
-  const renderColumns = () => {
-    return getColumns().map((column, index) => (
-      <StyledColumnItem key={index} index={index} spacingLeft={spacingLeft}>
-        {renderColumn(column)}
-      </StyledColumnItem>
-    ));
-  };
-
-  return <StyledMasonry>{renderColumns()}</StyledMasonry>;
-};
-
-export default Masonry;

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

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

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

@@ -1,32 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-import { MasonryProps } from './Masonry';
-
-export const StyledColumnItem = styled('div')<
-  Partial<StyleProps> & { index: number } & Partial<MasonryProps>
->`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-content: stretch;
-  flex: 1;
-  width: 0;
-  margin-left: ${({ theme, index, spacingLeft = 'nano' }) =>
-    index > 0 ? theme.spacing[spacingLeft] : 'initial'};
-`;
-
-export const StyledMasonry = styled('div')`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-content: stretch;
-  box-sizing: border-box;
-  width: 100%;
-`;
-
-export const StyledRowItem = styled('div')<
-  Partial<StyleProps> & { index: number } & Partial<MasonryProps>
->`
-  margin-top: ${({ theme, index, spacingTop = 'nano' }) =>
-    index > 0 ? theme.spacing[spacingTop] : 'initial'};
-`;

package/src/components/molecules/Menubar/MenuBlock/MenuBlock.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Text } from '@tecsinapse/react-core';
-import { MenuItem } from './MenuItem';
-import {
-  StyledContainerItems,
-  StyledContainerMenu,
-  StyledLeftComponent,
-} from './styled';
-import { ItemsOptions, OptionsType } from '../types';
-import { Masonry } from '../../Masonry';
-
-interface MenuBlockProps {
-  toggle: () => void;
-  options: OptionsType[];
-}
-
-const MenuBlock: React.FC<MenuBlockProps> = ({ options, toggle }) => {
-  return (
-    <Masonry columns={4} spacingTop="kilo" spacingLeft="mega">
-      {options.map(data => (
-        <React.Fragment key={`${data.title}`}>
-          <StyledContainerMenu>
-            {data.leftComponents && (
-              <StyledLeftComponent>{data.leftComponents}</StyledLeftComponent>
-            )}
-            <Text fontWeight="bold">{data.title}</Text>
-          </StyledContainerMenu>
-          <StyledContainerItems>
-            {data.items.map(
-              ({
-                title,
-                Component,
-                props,
-                rightComponents,
-                items,
-              }: ItemsOptions) => (
-                <MenuItem
-                  items={items}
-                  key={title}
-                  title={title}
-                  Component={Component}
-                  rightComponents={rightComponents}
-                  props={props}
-                  toggle={toggle}
-                />
-              )
-            )}
-          </StyledContainerItems>
-        </React.Fragment>
-      ))}
-    </Masonry>
-  );
-};
-
-export default React.memo(MenuBlock);

package/src/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.tsx

@@ -1,68 +0,0 @@
-import React, { ElementType } from 'react';
-import { Icon, Text } from '@tecsinapse/react-core';
-import { SubMenuBlock } from './SubMenuBlock';
-import { StyledRightComponent, StyledText } from '../styled';
-import { StyledContainerItemText, StyledSubButton } from './styled';
-import { ItemsOptions } from '../../types';
-
-interface MenuItemProps {
-  title: string;
-  /** Wrapping component for element. This is used for navigation */
-  Component: ElementType;
-  /** Properties spread to wrapping Component */
-  props: any;
-  toggle: () => void;
-  rightComponents?: React.ReactNode;
-  items?: ItemsOptions[];
-}
-
-const MenuItem: React.FC<MenuItemProps> = ({
-  title,
-  Component = 'a',
-  props = {},
-  rightComponents,
-  items,
-  toggle,
-}) => {
-  const [open, setOpen] = React.useState<boolean>(false);
-
-  const noTextDecoration = { textDecoration: 'none' };
-
-  const getIconName = () =>
-    open ? 'arrow-up-drop-circle-outline' : 'arrow-down-drop-circle-outline';
-
-  const handleMenuAction = () => setOpen(!open);
-
-  return (
-    <>
-      <StyledContainerItemText key={title}>
-        <Component {...props} style={noTextDecoration} onClick={toggle}>
-          <Text
-            colorVariant={open ? 'primary' : 'secondary'}
-            colorTone={open ? 'medium' : 'dark'}
-          >
-            <StyledText>{title}</StyledText>
-          </Text>
-        </Component>
-        {rightComponents && !items && (
-          <StyledRightComponent>{rightComponents}</StyledRightComponent>
-        )}
-        {items && (
-          <StyledSubButton onClick={handleMenuAction}>
-            <Icon
-              name={getIconName()}
-              type="material-community"
-              fontColor="orange"
-            />
-          </StyledSubButton>
-        )}
-      </StyledContainerItemText>
-      {open &&
-        items?.map(subItem => (
-          <SubMenuBlock key={subItem.title} data={subItem} toggle={toggle} />
-        ))}
-    </>
-  );
-};
-
-export default MenuItem;

package/src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Text } from '@tecsinapse/react-core';
-import { StyledRightComponent, StyledText } from '../../styled';
-import { ItemsOptions } from '../../../types';
-import { DummyBorder, StyledContainerItem } from './styled';
-
-interface SubMenuBlockProps {
-  data: ItemsOptions;
-  toggle: () => void;
-}
-
-const SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data, toggle }) => {
-  const { Component, props, rightComponents, title } = data;
-
-  const noTextDecoration = { textDecoration: 'none' };
-
-  return (
-    <StyledContainerItem>
-      <DummyBorder />
-      <Component {...props} style={noTextDecoration} onClick={toggle}>
-        <Text colorVariant="secondary" colorTone="medium" typography="sub">
-          <StyledText>{title}</StyledText>
-        </Text>
-      </Component>
-      {rightComponents && (
-        <StyledRightComponent>{rightComponents}</StyledRightComponent>
-      )}
-    </StyledContainerItem>
-  );
-};
-
-export default SubMenuBlock;

package/src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/index.ts

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

package/src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.ts

@@ -1,14 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-
-export const StyledContainerItem = styled('div')<Partial<StyleProps>>`
-  display: flex;
-  align-items: center;
-`;
-
-export const DummyBorder = styled('div')<Partial<StyleProps>>`
-  height: ${({ theme }) => theme.typography.sub.fontSize};
-  border-left: ${({ theme }) =>
-    `${theme.borderWidth.pico} solid ${theme.color.primary.medium}`};
-  margin-right: ${({ theme }) => theme.spacing.mili};
-`;

package/src/components/molecules/Menubar/MenuBlock/MenuItem/index.ts

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

package/src/components/molecules/Menubar/MenuBlock/MenuItem/styled.ts

@@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-
-export const StyledContainerItemText = styled('div')<Partial<StyleProps>>`
-  margin-top: ${({ theme }) => theme.spacing.mili};
-  display: flex;
-  align-items: center;
-`;
-
-export const StyledSubButton = styled('span')<Partial<StyleProps>>`
-  padding-top: ${({ theme }) => theme.spacing.nano} 0 0 0;
-  margin-left: ${({ theme }) => theme.spacing.mili};
-  cursor: pointer;
-  & * {
-    user-select: none;
-  }
-`;

package/src/components/molecules/Menubar/MenuBlock/index.ts

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

package/src/components/molecules/Menubar/MenuBlock/styled.ts

@@ -1,34 +0,0 @@
-import styled from '@emotion/styled';
-import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
-
-export const StyledLeftComponent = styled('div')<Partial<StyleProps>>`
-  margin-right: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const StyledRightComponent = styled('div')<Partial<StyleProps>>`
-  margin-left: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const StyledContainerMenu = styled('div')<Partial<StyleProps>>`
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-  border-bottom: ${({ theme }) =>
-    `${theme.borderWidth.pico} solid ${hex2rgba(
-      theme.miscellaneous.shadow,
-      0.05
-    )}`};
-  width: 100%;
-  padding-bottom: ${({ theme }) => theme.spacing.mili};
-`;
-
-export const StyledContainerItems = styled('div')<Partial<StyleProps>>`
-  display: flex;
-  flex-direction: column;
-`;
-
-export const StyledText = styled('span')<Partial<StyleProps>>`
-  &:hover {
-    color: ${({ theme }) => theme.font.color.orange};
-  }
-`;

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

@@ -1,279 +0,0 @@
-import React, { ElementType } from 'react';
-import Menubar, { MenubarProps } from './Menubar';
-import { Story } from '@storybook/react';
-import styled from '@emotion/styled';
-import { Avatar, Icon, Text } from '@tecsinapse/react-core';
-
-export default {
-  title: 'Web/Menu Bar',
-  component: Menubar,
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-const EXAMPLE_MENU = [
-  {
-    title: 'Categoria do menu 1',
-    leftComponents: <Icon name="magnify" type="material-community" />,
-    items: [
-      {
-        title: 'Item de menu 1',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item de menu 2',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item de menu 3',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item de menu 4',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item de menu 5',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-    ],
-  },
-  {
-    title: 'Categoria do menu 2',
-    items: [
-      {
-        title: 'Item menu 1',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-        items: [
-          {
-            title: 'Item menu 1.1',
-            Component: 'a' as ElementType,
-            props: { href: '#' },
-            rightComponents: undefined,
-          },
-          {
-            title: 'Item menu 1.2',
-            Component: 'a' as ElementType,
-            props: { href: '#' },
-            rightComponents: undefined,
-          },
-        ],
-      },
-      {
-        title: 'Item menu 2',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-        items: [
-          {
-            title: 'Item menu 2.1',
-            Component: 'a' as ElementType,
-            props: { href: '#' },
-            rightComponents: (
-              <div
-                style={{
-                  display: 'flex',
-                  backgroundColor: '#2db783',
-                  borderRadius: '4px',
-                  padding: '3px',
-                }}
-              >
-                <Text fontColor="light" typography="label">
-                  Novo
-                </Text>
-              </div>
-            ),
-          },
-          {
-            title: 'Item menu 2.2',
-            Component: 'a' as ElementType,
-            props: { href: '#' },
-            rightComponents: undefined,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Categoria do menu 3',
-    items: [
-      {
-        title: 'Item menu 1',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item menu 2',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item menu 3',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-    ],
-  },
-  {
-    title: 'Categoria do menu 4',
-    items: [
-      {
-        title: 'Item menu 1',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item menu 2',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item menu 3',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-    ],
-  },
-  {
-    title: 'Categoria do menu 5',
-    items: [
-      {
-        title: 'Item menu 1',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item menu 2',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item menu 3',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-    ],
-  },
-  {
-    title: 'Categoria do menu 6',
-    items: [
-      {
-        title: 'Item menu 1',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item menu 2',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item menu 3',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: undefined,
-      },
-      {
-        title: 'Item menu 4',
-        Component: 'a' as ElementType,
-        props: { href: '#' },
-        rightComponents: (
-          <div
-            style={{
-              display: 'flex',
-              backgroundColor: '#2db783',
-              borderRadius: '4px',
-              padding: '3px',
-            }}
-          >
-            <Text fontColor="light" typography="label">
-              Novo
-            </Text>
-          </div>
-        ),
-      },
-    ],
-  },
-];
-
-const MOST_USED = [
-  {
-    title: 'Item de menu 1',
-    category: 'Categoria de menu 1',
-    Component: 'a' as ElementType,
-    props: { href: '#' },
-  },
-  {
-    title: 'Item de menu 2',
-    category: 'Categoria de menu 2',
-    Component: 'a' as ElementType,
-    props: { href: '#' },
-  },
-  {
-    title: 'Item de menu 3',
-    category: 'Categoria de menu 3',
-    Component: 'a' as ElementType,
-    props: { href: '#' },
-  },
-  {
-    title: 'Item de menu 4',
-    category: 'Categoria de menu 4',
-    Component: 'a' as ElementType,
-    props: { href: '#' },
-  },
-];
-
-const StyledImage = styled('img')`
-  width: auto;
-  height: 35px;
-  margin-right: 35px;
-`;
-
-const Template: Story<MenubarProps> = args => {
-  return (
-    <>
-      <Menubar
-        {...args}
-        options={EXAMPLE_MENU}
-        mostUsed={MOST_USED}
-        leftComponents={
-          <StyledImage
-            src="https://www.tecsinapse.com.br/wp-content/themes/tecsinapse/img/logo.svg"
-            alt="TecSinapse"
-          />
-        }
-        rightComponents={
-          <div style={{ marginLeft: 24 }}>
-            <Avatar name="Design System" />
-          </div>
-        }
-      />
-    </>
-  );
-};
-
-export const Base = Template.bind({});