@loja-integrada/admin-components 0.14.0 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -0,0 +1,85 @@
+import * as React from "react"
+import { composeStories } from "@storybook/testing-react"
+import { mount } from "@cypress/react"
+import * as stories from "./TableList.stories"
+
+const { Default, WithLoading, WithEmpty, WithLink } = composeStories(stories)
+
+describe('TableListItem tests', () => {
+
+  it('Default', () => {
+    mount(<Default />)
+    cy.get('.table-list')
+      .should('exist')
+      .find('.table-list-group')
+        .should('have.length', 6)
+
+    cy.get('.table-list .table-list-group')
+      .first()
+      .find('.table-list-title')
+        .should('have.class', 'relative lg:hidden')
+        .contains('11 de abril')
+
+    cy.get('.table-list .table-list-group')
+      .first()
+      .find('.group-items .table-item')
+        .should('have.length', 6)
+  })
+
+  it('WithLoading', () => {
+    mount(<WithLoading />)
+    cy.get('.table-list .table-list-loading')
+      .should('exist')
+      .find('.table-item-loading')
+        .should('have.length', 4)
+  })
+
+  it('WithEmpty', () => {
+    mount(<WithEmpty />)
+    cy.get('.table-list .table-list-empty')
+      .should('exist')
+      .find('.table-list-empty-illustration')
+        .should('exist')
+        .find('svg')
+          .should('exist')
+    cy.get('.table-list .table-list-empty')
+      .find('.table-list-empty-title')
+        .should('exist')
+        .contains('Você ainda não fez nenhuma venda conosco')
+    cy.get('.table-list .table-list-empty')
+      .find('.table-list-empty-subtitle')
+        .should('exist')
+        .contains('Continua firme, você consegue')
+    cy.get('.table-list .table-list-empty')
+      .find('.table-list-empty-action')
+        .should('exist')
+        .contains('Voltar')
+
+    mount(<WithEmpty empty={undefined} />)
+    cy.get('.table-list .table-list-empty')
+      .should('exist')
+      .find('.table-list-empty-illustration')
+        .should('not.exist')
+    cy.get('.table-list .table-list-empty')
+      .find('.table-list-empty-title')
+        .should('exist')
+        .contains('Nenhum registro encontrado')
+    cy.get('.table-list .table-list-empty')
+      .find('.table-list-empty-subtitle')
+        .should('not.exist')
+    cy.get('.table-list .table-list-empty')
+      .find('.table-list-empty-action')
+        .should('not.exist')
+  })
+
+  it('WithLink', () => {
+    mount(<WithLink />)
+    cy.get('.table-list .table-item')
+      .first()
+      .find('a.table-item-wrapper')
+        .should('exist')
+        .should('have.attr', 'href', '#link')
+        .should('have.class', 'hover:bg-base-2 before:hover:block')
+        .should('have.class', 'after:hover:block')
+  })
+})

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

@@ -0,0 +1,168 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import { withDesign } from 'storybook-addon-designs'
+
+import { Icon } from '../../Icons'
+import { Button } from '../Button'
+import { TableList, TableListProps } from './TableList'
+
+const exampleItems = [
+  {
+    title: 'R$ 3.599,99 cancelada',
+    description: '#JZW55MBEIX - QA Loja Integrada via pix',
+    timestampTime: '11:18',
+    timestampDate: '11 de abril',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-danger-light text-danger-dark', icon: 'close' }
+  },
+  {
+    title: 'R$ 3.599,99 cancelada',
+    description: '#P0UYL7PWBF - QA Loja Integrada via pix',
+    timestampTime: '05:38',
+    timestampDate: '11 de abril',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-danger-light text-danger-dark', icon: 'close' }
+  },
+  {
+    title: 'R$ 12,00 incompleta',
+    description: '#67JYUCMTR1',
+    timestampTime: '05:37',
+    timestampDate: '11 de abril',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-primary-light text-inverted-2', icon: 'clock' }
+  },
+  {
+    title: 'R$ 0,50 cancelada',
+    description: '#JTRM6NBP41 - QA Store 1 via pix',
+    timestampTime: '05:36',
+    timestampDate: '11 de abril',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-danger-light text-danger-dark', icon: 'close' }
+  },
+  {
+    title: 'R$ 0,01 incompleta',
+    description: '#39YDAHYA1F',
+    timestampTime: '05:35',
+    timestampDate: '11 de abril',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-primary-light text-inverted-2', icon: 'clock' }
+  },
+  {
+    title: 'R$ 12,00 incompleta',
+    description: '#ZPN7P3BZI3',
+    timestampTime: '05:33',
+    timestampDate: '11 de abril',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-primary-light text-inverted-2', icon: 'clock' }
+  },
+  {
+    title: 'R$ 229,05 aprovada',
+    description: '#0XGQZQ164P - QA Loja Integrada via boleto',
+    timestampTime: '15:40',
+    timestampDate: '07 de abril',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-success-light text-success-dark', icon: 'check' }
+  },
+  {
+    title: 'R$ 232,56 devolvida',
+    description: '#V1KZRJS49J - QA Loja Integrada via credit_card',
+    timestampTime: '05:46',
+    timestampDate: '05 de abril',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-[#E7DDF3] text-inverted-1', icon: 'back' }
+  },
+  {
+    title: 'R$ 2.666,79 devolvida parcialmente',
+    description: '#RB3JJLLKV9 - QA Loja Integrada via credit_card',
+    timestampTime: '13:46',
+    timestampDate: '04 de abril',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-[#E7DDF3] text-inverted-1', icon: 'halfBack' }
+  },
+  {
+    title: 'R$ 144,00 criada',
+    description: '#FLGXE26Q62 - Joazinho do Teste via credit_card',
+    timestampTime: '14:59',
+    timestampDate: '29 de março',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-primary-light text-inverted-2', icon: 'clock' }
+  },
+  {
+    title: 'R$ 311,64 criada',
+    description: '#1RS5OPTW34 - Joazinho do Teste via credit_card',
+    timestampTime: '14:23',
+    timestampDate: '29 de março',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-primary-light text-inverted-2', icon: 'clock' }
+  },
+  {
+    title: 'R$ 360,00 cancelada',
+    description: '#D4RHATKP9E',
+    timestampTime: '16:10',
+    timestampDate: '24 de março',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-danger-light text-danger-dark', icon: 'close' }
+  },
+  {
+    title: 'R$ 350,56 cancelada',
+    description: '#4UZDIZJCNS',
+    timestampTime: '16:05',
+    timestampDate: '24 de março',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-danger-light text-danger-dark', icon: 'close' }
+  },
+  {
+    title: 'R$ 23,30 cancelada',
+    description: '#WNLVZQDREA',
+    timestampTime: '16:04',
+    timestampDate: '24 de março',
+    itemWrapperProps: { href: '#link' },
+    withIcon: { class: 'bg-danger-light text-danger-dark', icon: 'close' }
+  },
+]
+
+export default {
+  title: 'Components/TableList',
+  component: TableList,
+  decorators: [withDesign],
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    items: exampleItems,
+  },
+} as Meta
+
+const Template: Story<TableListProps> = (args) => <TableList {...args} />
+
+export const Default = Template.bind({})
+
+export const WithLoading = Template.bind({})
+WithLoading.args = {
+  isLoading: true,
+}
+
+export const WithEmpty = Template.bind({})
+WithEmpty.args = {
+  items: [],
+  empty: {
+    title: 'Poxa, que pena! Você ainda não fez nenhuma venda conosco.',
+    illustration: <Icon icon="ban" size={9} className="text-primary" />,
+    subTitle: 'Mas fica tranquilo que quando você começar a vender, suas transações aparecerão aqui. Continua firme, você consegue!',
+    action: <Button variant="secondary">Voltar</Button>
+  }
+}
+
+const CellLink = (props: any) => {
+  const { href = '/', children, ...restProps } = props
+  return (
+    <a href={href} {...restProps}>{children}</a>
+  )
+}
+
+export const WithLink = Template.bind({})
+WithLink.args = {
+  withHover: true,
+  isInsideContainer: true,
+  itemWrapper: CellLink,
+}

package/src/Components/TableList/TableList.tsx

@@ -0,0 +1,168 @@
+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-[80vh] 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}
+                      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

@@ -0,0 +1,57 @@
+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
+  /**
+   * Icon to show at item
+   */
+  withIcon?: {
+    /**
+     * Classes with text-color and background of icon
+     */
+    class?: string
+    /**
+     * Icon to use
+     */
+    icon?: IconProps['icon']
+  }
+  /** 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

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { composeStories } from "@storybook/testing-react"
+import { mount } from "@cypress/react"
+import * as stories from "./TableListItem.stories"
+
+const { Item } = composeStories(stories)
+
+describe('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 .table-item-timestamp-time')
+      .should('exist')
+      .contains('19:45')
+    cy.get('.table-item .table-item-timestamp .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('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')
+  })
+
+})

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

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

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import { Icon } from '../../Icons'
+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,
+}) => {
+  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 || ''
+              }`}
+            >
+              <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 && (
+          <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">
+              {timestampTime}
+            </div>
+            {timestampDate && (
+              <div className="table-item-timestamp-date w-full hidden lg:block">
+                {timestampDate}
+              </div>
+            )}
+          </div>
+        )}
+      </TableListItemWrapper>
+    </div>
+  )
+}

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

@@ -0,0 +1,18 @@
+import * as React from "react"
+import { composeStories } from "@storybook/testing-react"
+import { mount } from "@cypress/react"
+import * as stories from "./TableListItemLoading.stories"
+
+const { ItemLoading } = composeStories(stories)
+
+describe('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')
+  })
+
+})