@loja-integrada/admin-components 0.19.4 → 1.0.0

package/src/Components/TableList/TableList.tsx

@@ -1,169 +0,0 @@
-import React from 'react'
-
-import { TableListItemProps } from './TableListItem.interface'
-import { TableListItem } from './TableListItem'
-import { TableListItemLoading } from './TableListItemLoading'
-
-const groupTitleMobileClass = `before:block before:absolute before:h-0 before:w-5 before:-top-px before:-left-5 before:border-t before:border-primary-bold before:border-opacity-10 after:block after:absolute after:h-0 after:w-5 after:-top-px after:-right-5 after:border-t after:border-primary-bold after:border-opacity-10`
-
-const TableListComponent = ({
-  className = '',
-  itemWrapper,
-  items = [],
-  isLoading = false,
-  empty = {
-    title: 'Nenhum registro encontrado',
-  },
-  withHover = false,
-  isInsideContainer = false,
-}: TableListProps) => {
-  const itemsMemoized = React.useMemo(() => {
-    const groups = items.reduce(
-      (
-        groups: {
-          [key: string]: TableListItemProps[]
-        },
-        item
-      ) => {
-        const groupTitle =
-          item.timestampDate || item.timestampTime || 'no_title'
-        if (!groups[groupTitle]) {
-          groups[groupTitle] = []
-        }
-        groups[groupTitle].push(item)
-        return groups
-      },
-      {}
-    )
-
-    return Object.keys(groups).map((groupTitle) => {
-      return {
-        title: groupTitle,
-        items: groups[groupTitle],
-      }
-    })
-  }, [items])
-
-  return (
-    <div className={`table-list tracking-tight ${className}`}>
-      {isLoading ? (
-        <div className="table-list-loading">
-          <TableListItemLoading />
-          <TableListItemLoading />
-          <TableListItemLoading />
-          <TableListItemLoading />
-        </div>
-      ) : !itemsMemoized || !itemsMemoized.length ? (
-        <div className="table-list-empty flex flex-col items-center justify-center gap-5 min-h-[40vh] lg:min-h-[60vh] max-w-sm mx-auto px-4">
-          {empty.illustration && (
-            <div className="table-list-empty-illustration text-center">
-              {empty.illustration}
-            </div>
-          )}
-          <div className="table-list-empty-title text-center text-f4 font-semibold text-primary-bold leading-7">
-            {empty.title}
-          </div>
-          {empty.subTitle && (
-            <div className="table-list-empty-subtitle text-center text-f6 text-on-base-2 leading-6 -mt-1">
-              {empty.subTitle}
-            </div>
-          )}
-          {empty.action && (
-            <div className="table-list-empty-action text-center">
-              {empty.action}
-            </div>
-          )}
-        </div>
-      ) : (
-        itemsMemoized.map((group, indexGroup) => {
-          return (
-            <div key={`group-items-${indexGroup}`} className="table-list-group">
-              {group.title && group.title !== 'no_title' && (
-                <div
-                  className={`table-list-title relative lg:hidden border-primary-bold border-opacity-10 ${
-                    indexGroup !== 0
-                      ? `border-t ${
-                          isInsideContainer ? groupTitleMobileClass : ''
-                        }`
-                      : ''
-                  }`}
-                >
-                  <span
-                    className={`text-f5 text-on-base-2 leading-4 break-words inline-block pt-6 pb-2`}
-                  >
-                    {group.title}
-                  </span>
-                </div>
-              )}
-              <div className="group-items">
-                {group.items.map((item, indexItem) => {
-                  return (
-                    <TableListItem
-                      key={`group-item-${indexItem}`}
-                      forceBorderDesktop={indexItem === 0 && indexGroup !== 0}
-                      title={item.title}
-                      description={item.description}
-                      timestampTime={item.timestampTime}
-                      timestampDate={item.timestampDate}
-                      itemWrapper={itemWrapper}
-                      itemWrapperProps={item.itemWrapperProps}
-                      withIcon={item.withIcon}
-                      append={item.append}
-                      withHover={withHover}
-                      isInsideContainer={isInsideContainer}
-                    />
-                  )
-                })}
-              </div>
-            </div>
-          )
-        })
-      )}
-    </div>
-  )
-}
-
-export const TableList = React.memo(TableListComponent)
-
-export interface TableListProps
-  extends Pick<
-    TableListItemProps,
-    'withHover' | 'isInsideContainer' | 'itemWrapper'
-  > {
-  /**
-   * Custom class name
-   * */
-  className?: string
-  /**
-   * Items of the TableList
-   */
-  items?: Omit<
-    TableListItemProps,
-    'forceBorderDesktop' | 'itemWrapper' | 'withHover'
-  >[]
-  /** TableList is loading
-   * @default false
-   */
-  isLoading?: boolean
-  /**
-   * Content to show when TableList is empty
-   */
-  empty?: {
-    /** Title when is empty
-     * @default 'Nenhum registro encontrado'
-     */
-    title?: string | React.ReactNode
-    /**
-     * Subtitle when is empty
-     */
-    subTitle?: string | React.ReactNode
-    /**
-     * Illustration or icon for when is empty
-     */
-    illustration?: React.ReactNode
-    /**
-     * Action (button) for when is empty
-     */
-    action?: React.ReactNode
-  }
-}

package/src/Components/TableList/TableListItem.interface.ts

@@ -1,69 +0,0 @@
-import { TippyProps } from '@tippyjs/react'
-import { IconProps } from '../../Icons'
-
-export type TableListItemWrapperProp =
-  | React.ComponentClass<any>
-  | React.FunctionComponent<any>
-
-export interface TableListItemProps {
-  /**
-   * Title of the item
-   */
-  title: string | React.ReactNode
-  /**
-   * Description that appears above the title
-   */
-  description?: string | React.ReactNode
-  /**
-   * Timestamp of the item, usually in HH:mm
-   */
-  timestampTime?: string
-  /**
-   * Timestamp of the item, usually in dd/mm/yyyy
-   */
-  timestampDate?: string
-  /**
-   * Addittional content at item
-   */
-  append?: string | React.ReactNode
-  /**
-   * Icon to show at item
-   */
-  withIcon?: {
-    /**
-     * Classes with text-color and background of icon
-     */
-    class?: string
-    /**
-     * Icon to use
-     */
-    icon?: IconProps['icon']
-    /**
-     * Tooltip to use
-     */
-    tooltip?: {
-      message: string
-      placement?: TippyProps['placement']
-    }
-  }
-  /** Force border top at desktop even if is first item
-   * @default false
-   */
-  forceBorderDesktop?: boolean
-  /** Show hover effect
-   * @default false
-   */
-  withHover?: boolean
-  /** Adds hover effect and mobile border with negative margin to fulfill container padding
-   * @default false
-   */
-  isInsideContainer?: boolean
-  /**
-   * Props of the `item.itemWrapper`
-   */
-  itemWrapperProps?: { [key: string]: unknown }
-  /**
-   * Component to wrap item. Usually an <a> or related. Props of each item are placed at `items.itemWrapperProps`
-   */
-  itemWrapper?: TableListItemWrapperProp
-}

package/src/Components/TableList/TableListItem.spec.tsx

@@ -1,75 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./TableListItem.stories"
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-
-const { Item } = composeStories(stories)
-
-describe(specTitle('TableListItem tests'), () => {
-
-  it('Default', () => {
-    mount(<Item />)
-    cy.get('.table-item')
-      .should('exist')
-      .should('not.have.class', 'lg:first:border-t')
-      .find('.table-item-wrapper')
-        .should('exist')
-    cy.get('.table-item .table-item-icon')
-      .should('exist')
-      .find('.table-item-icon-background')
-        .should('have.class', 'w-8')
-        .should('have.class', 'bg-warning-light')
-        .find('svg')
-          .should('exist')
-    cy.get('.table-item .table-item-content')
-      .find('.table-item-title')
-        .should('exist')
-        .contains('devolvida')
-    cy.get('.table-item .table-item-content')
-      .find('.table-item-description')
-        .should('exist')
-        .contains('Cartão')
-    cy.get('.table-item .table-item-timestamp-time')
-      .should('exist')
-      .contains('19:45')
-    cy.get('.table-item .table-item-timestamp-date')
-      .should('exist')
-      .contains('dezembro')
-  })
-
-  it('Force Border Desktop', () => {
-    mount(<Item forceBorderDesktop={true} />)
-    cy.get('.table-item')
-      .should('have.class', 'lg:first:border-t')
-  })
-
-  it('Append', () => {
-    mount(<Item append={'External'} />)
-    cy.get('.table-item .table-item-append')
-      .should('exist')
-      .contains('External')
-  })
-
-  it('Without', () => {
-    mount(<Item withIcon={undefined} />)
-    cy.get('.table-item .table-item-icon')
-      .should('not.exist')
-
-    mount(<Item description={undefined} />)
-    cy.get('.table-item .table-item-description')
-      .should('not.exist')
-
-    mount(<Item timestampDate={undefined} />)
-    cy.get('.table-item .table-item-timestamp-date')
-      .should('not.exist')
-
-    mount(<Item timestampTime={undefined} />)
-    cy.get('.table-item .table-item-timestamp-time')
-      .should('not.exist')
-
-    mount(<Item append={undefined} />)
-    cy.get('.table-item .table-item-append')
-      .should('not.exist')
-  })
-})

package/src/Components/TableList/TableListItem.stories.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { withDesign } from 'storybook-addon-designs'
-
-import { TableListItemProps } from './TableListItem.interface'
-import { TableListItem } from './TableListItem'
-
-const CellLink = (props: any) => {
-  const { href = '/', children, ...restProps } = props
-  return (
-    <a href={href} {...restProps}>{children}</a>
-  )
-}
-
-export default {
-  title: 'Components/TableList',
-  component: TableListItem,
-  decorators: [withDesign],
-  parameters: {
-    layout: 'padded',
-  },
-  args: {
-    title: 'R$ 49,90 devolvida parcialmente',
-    description: '#29102 - Daniela Cabral via Cartão de crédito',
-    timestampTime: '19:45',
-    timestampDate: '10 de dezembro',
-    append: <span className="cursor hover:underline text-primary font-semibold">Ver mais</span>,
-    itemWrapperProps: {
-      href: '#a'
-    },
-    withIcon: {
-      class: 'bg-warning-light text-warning-dark',
-      icon: 'clock',
-    },
-    forceBorderDesktop: false,
-    withHover: true,
-    isInsideContainer: true,
-    itemWrapper: CellLink,
-  },
-} as Meta
-
-const Template: Story<TableListItemProps> = (args) => <TableListItem {...args} />
-
-export const Item = Template.bind({})

package/src/Components/TableList/TableListItem.tsx

@@ -1,79 +0,0 @@
-import React from 'react'
-
-import { Icon } from '../../Icons'
-import { Tooltip } from '../../Indicators'
-import { TableListItemProps } from './TableListItem.interface'
-import { TableListItemWrapper } from './TableListItemWrapper'
-
-export const TableListItem: React.FunctionComponent<TableListItemProps> = ({
-  forceBorderDesktop = false,
-  title,
-  description,
-  timestampTime,
-  timestampDate,
-  itemWrapper,
-  itemWrapperProps,
-  withHover = false,
-  isInsideContainer = false,
-  withIcon,
-  append,
-}) => {
-  return (
-    <div
-      className={`table-item border-primary-bold border-opacity-10 border-t first:border-t-0 ${
-        forceBorderDesktop ? 'lg:first:border-t' : ''
-      }`}
-    >
-      <TableListItemWrapper
-        Wrapper={itemWrapper}
-        props={itemWrapperProps}
-        withHover={withHover}
-        isInsideContainer={isInsideContainer}
-      >
-        {withIcon && (
-          <div className="table-item-icon flex items-center justify-center flex-none mr-4">
-            <div
-              className={`table-item-icon-background h-8 w-8 flex items-center justify-center rounded ${
-                withIcon.class || ''
-              }`}
-            >
-              {withIcon.tooltip ? (
-                <Tooltip
-                  content={withIcon.tooltip.message}
-                  placement={withIcon.tooltip.placement}
-                >
-                  <span>
-                    <Icon icon={withIcon.icon || 'minus'} block size={5} />
-                  </span>
-                </Tooltip>
-              ) : (
-                <Icon icon={withIcon.icon || 'minus'} block size={5} />
-              )}
-            </div>
-          </div>
-        )}
-        <div className="table-item-content flex flex-col justify-center flex-auto gap-1.5 min-w-0 w-full">
-          <div className="table-item-title text-f6 font-semibold">{title}</div>
-          {description && (
-            <div className="table-item-description">{description}</div>
-          )}
-        </div>
-        {(timestampTime || timestampDate || append) && (
-          <div className="table-item-timestamp-append flex flex-col justify-center items-end shrink-0 gap-1.5 ml-4 min-w-0 max-w-[50%] text-right">
-            {timestampTime && (
-              <div className="table-item-timestamp-time w-full">
-                {timestampTime}
-              </div>
-            )}
-            {timestampDate && (
-              <div className="table-item-timestamp-date w-full hidden lg:block">
-                {timestampDate}
-              </div>
-            )}
-            {append && <div className="table-item-append w-full">{append}</div>}
-          </div>
-        )}
-      </TableListItemWrapper>
-    </div>
-  )
-}

package/src/Components/TableList/TableListItemLoading.spec.tsx

@@ -1,19 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./TableListItemLoading.stories"
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-
-const { ItemLoading } = composeStories(stories)
-
-describe(specTitle('TableListItemLoading tests'), () => {
-
-  it('Default', () => {
-    mount(<ItemLoading />)
-    cy.get('.table-item.table-item-loading')
-      .should('exist')
-      .find('.table-item-content .table-item-title .animate-pulse')
-        .should('exist')
-  })
-
-})

package/src/Components/TableList/TableListItemLoading.stories.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { withDesign } from 'storybook-addon-designs'
-
-import { TableListItemProps } from './TableListItem.interface'
-import { TableListItemLoading } from './TableListItemLoading'
-
-export default {
-  title: 'Components/TableList',
-  component: TableListItemLoading,
-  decorators: [withDesign],
-  parameters: {
-    layout: 'padded',
-  },
-  args: {
-    forceBorderDesktop: false,
-  },
-} as Meta
-
-const Template: Story<Pick<TableListItemProps, 'forceBorderDesktop'>> = (args) => <TableListItemLoading {...args} />
-
-export const ItemLoading = Template.bind({})

package/src/Components/TableList/TableListItemLoading.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-
-import { LoadingPlaceholder } from '../LoadingPlaceholder'
-import { TableListItemProps } from './TableListItem.interface'
-import { TableListItemWrapper } from './TableListItemWrapper'
-
-export const TableListItemLoading: React.FunctionComponent<
-  Pick<TableListItemProps, 'forceBorderDesktop'>
-> = ({ forceBorderDesktop = false }) => {
-  return (
-    <div
-      className={`table-item table-item-loading border-primary-bold border-opacity-10 border-t first:border-t-0 ${
-        forceBorderDesktop ? 'lg:first:border-t' : ''
-      }`}
-    >
-      <TableListItemWrapper>
-        <div className="table-item-icon flex items-center justify-center flex-none mr-4">
-          <div
-            className={`table-item-icon-background h-8 w-8 flex items-center justify-center rounded`}
-          >
-            <LoadingPlaceholder className="w-full" />
-          </div>
-        </div>
-        <div className="table-item-content flex flex-col justify-center flex-auto gap-1.5 min-w-0 w-full">
-          <div className="table-item-title text-f6 font-semibold">
-            <LoadingPlaceholder className="w-2/3" />
-          </div>
-          <div className="table-item-description">
-            <LoadingPlaceholder className="w-1/3" />
-          </div>
-        </div>
-        <div className="table-item-timestamp flex flex-col justify-center items-end shrink-0 gap-1.5 ml-4 min-w-0 max-w-[50%] text-right">
-          <div className="table-item-timestamp-time w-full">
-            <LoadingPlaceholder className="w-16" />
-          </div>
-        </div>
-      </TableListItemWrapper>
-    </div>
-  )
-}

package/src/Components/TableList/TableListItemWrapper.spec.tsx

@@ -1,33 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./TableListItemWrapper.stories"
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-
-const { ItemWrapper } = composeStories(stories)
-
-describe(specTitle('TableListItemWrapper tests'), () => {
-
-  it('Default', () => {
-    mount(<ItemWrapper withHover={false} isInsideContainer={false} />)
-    cy.get('a.table-item-wrapper')
-      .should('exist')
-      .should('have.attr', 'href', '#a')
-      .should('have.class', 'flex relative')
-      .should('not.have.class', 'hover:bg-base-2 before:hover:block')
-      .contains('Some randon content')
-    
-  })
-
-  it('Without Wrapper', () => {
-    mount(<ItemWrapper Wrapper={undefined} />)
-    cy.get('div.table-item-wrapper').should('exist')
-  })
-
-  it('With Hover', () => {
-    mount(<ItemWrapper withHover={true} isInsideContainer={true} Wrapper={undefined} />)
-    cy.get('.table-item-wrapper').should('have.class', 'hover:bg-base-2 before:hover:block')
-    cy.get('.table-item-wrapper').should('have.class', 'after:hover:block')
-  })
-
-})

package/src/Components/TableList/TableListItemWrapper.stories.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { withDesign } from 'storybook-addon-designs'
-
-import { TableListItemWrapper, TableListItemWrapperProps } from './TableListItemWrapper'
-
-const CellLink = (props: any) => {
-  const { href = '/', children, ...restProps } = props
-  return (
-    <a href={href} {...restProps}>{children}</a>
-  )
-}
-
-export default {
-  title: 'Components/TableList',
-  component: TableListItemWrapper,
-  decorators: [withDesign],
-  parameters: {
-    layout: 'padded',
-  },
-  args: {
-    Wrapper: CellLink,
-    children: (
-      <div>
-        Some randon content
-      </div>
-    ),
-    props: {
-      href: '#a'
-    },
-    withHover: true,
-    isInsideContainer: true
-  },
-} as Meta
-
-const Template: Story<TableListItemWrapperProps> = (args) => <TableListItemWrapper {...args} />
-
-export const ItemWrapper = Template.bind({})

package/src/Components/TableList/TableListItemWrapper.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-
-import { TableListItemWrapperProp } from './TableListItem.interface'
-
-const ItemWrapperClasses = `flex relative py-6 text-f7 leading-4 break-words no-underline`
-const ItemWrapperClassesContainerHover = `before:hover:block before:hover:absolute before:hover:h-full before:hover:w-5 lg:before:hover:w-8 before:hover:top-0 before:hover:-left-5 lg:before:hover:-left-8 before:hover:bg-base-2 after:hover:block after:hover:absolute after:hover:h-full after:hover:w-5 lg:after:hover:w-8 after:hover:top-0 after:hover:-right-5 lg:after:hover:-right-8 after:hover:bg-base-2`
-
-const DefaultWrapper = (props: any) => {
-  const { children, ...restProps } = props
-  return <div {...restProps}>{children}</div>
-}
-
-export const TableListItemWrapper = ({
-  Wrapper = DefaultWrapper,
-  props = {},
-  children,
-  withHover = false,
-  isInsideContainer = false,
-}: TableListItemWrapperProps) => (
-  <Wrapper
-    className={`table-item-wrapper ${ItemWrapperClasses} ${
-      withHover
-        ? `hover:bg-base-2 ${
-            isInsideContainer ? ItemWrapperClassesContainerHover : ''
-          }`
-        : ''
-    }`}
-    {...props}
-  >
-    {children}
-  </Wrapper>
-)
-
-export interface TableListItemWrapperProps {
-  Wrapper?: TableListItemWrapperProp
-  children: React.ReactNode
-  props?: { [key: string]: unknown }
-  withHover?: boolean
-  isInsideContainer?: boolean
-}

package/src/Components/TableList/index.tsx

@@ -1,4 +0,0 @@
-export * from './TableList'
-export * from './TableListItem'
-export * from './TableListItem.interface'
-export * from './TableListItemLoading'

package/src/Components/Tabs/Tabs.spec.tsx

@@ -1,38 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./Tabs.stories"
-
-const { Default } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Tabs tests'), () => {
-
-  it('Default', () => {
-    mount(<Default />)
-    let alerted = ''
-    cy.on('window:alert', msg => alerted = msg)
-
-    cy.get('.tabs .tabs-item')
-      .should('have.length', 4)
-      .first().within(() => {
-        cy.get('span').contains('Pedidos')
-        cy.get('span').should('have.class', 'border-primary')
-      })
-    cy.get('.tabs .tabs-item').last()
-      .click().then(() => expect(alerted).to.match(/vendas/))
-    cy.get('.tabs .tabs-item').last()
-      .should('have.class', 'tabs-item-active')
-      .within(() => {
-        cy.get('span').contains('Vendas')
-      })
-  })
-
-  it('Active', () => {
-    mount(<Default activeItem="cupons" />)
-    cy.get('.tabs .tabs-item.tabs-item-active')
-      .should('have.length', 1)
-      .get('span').contains('Cupons de desconto')
-  })
-
-})