@loja-integrada/admin-components 0.19.4 → 1.0.0

package/src/Navigation/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Breadcrumb, BreadcrumbProps } from '.'
-import { Button } from '../../Components/Button'
-
-export default {
-  title: 'Navigation/Breadcrumb',
-  component: Breadcrumb,
-  parameters: {
-    layout: 'padded',
-  }
-} as Meta
-
-const Template: Story<BreadcrumbProps> = args => <Breadcrumb {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  currentTitle: 'Página atual',
-  previousTitle: 'Página anterior'
-}
-
-export const NoPrevious = Template.bind({})
-NoPrevious.args = {
-  currentTitle: 'Página atual',
-}
-
-export const WithPrevious = Template.bind({})
-WithPrevious.args = {
-  currentTitle: 'Página atual',
-  previousTitle: 'Página anterior',
-  previousHref: 'https://www.google.com'
-}
-
-const Link = (props: any) => { return  <a href="https://www.google.com" target="_blank" className={`underline ` + props.className}>{props.children}</a> }
-export const WithPreviousCustom = Template.bind({})
-WithPreviousCustom.args = {
-  currentTitle: 'Página atual',
-  previousTitle: 'Página anterior',
-  Link: Link
-}
-
-export const WithoutPreviousTitle = Template.bind({})
-WithoutPreviousTitle.args = {
-  currentTitle: 'Página atual',
-  previousHref: 'https://www.google.com'
-}
-
-export const WithMobileCenter = Template.bind({})
-WithMobileCenter.args = {
-  currentTitle: 'Página atual',
-  previousTitle: 'Página anterior',
-  previousHref: 'https://www.google.com',
-  mobileAlign: 'center'
-}
-
-export const WithHelp = Template.bind({})
-WithHelp.args = {
-  currentTitle: 'Página atual',
-  previousHref: 'https://www.google.com',
-  mobileAlign: 'center',
-  help: {
-    title: 'Saiba mais',
-    href: 'https://www.google.com'
-  }
-}
-
-export const WithActions = Template.bind({})
-WithActions.args = {
-  currentTitle: 'Página atual',
-  previousHref: 'https://www.google.com',
-  mobileAlign: 'center',
-  actions: (
-    <>
-      <Button variant="outline" className="hidden lg:block">Cancelar</Button>
-      <Button variant="outline" icon="app" iconPosition="left">Salvar</Button>
-    </>
-  )
-}

package/src/Navigation/Breadcrumb/index.tsx

@@ -1,153 +0,0 @@
-import React from 'react'
-import { Icon } from '../../Icons/Icon'
-import { HelpLink } from '../../Components/HelpLink'
-
-const actionsDisplayClass = {
-  both: 'flex',
-  desktop: 'hidden lg:flex',
-  mobile: 'flex lg:hidden',
-}
-
-export const Breadcrumb: React.FC<BreadcrumbProps> = React.memo(
-  ({
-    Link,
-    currentTitle,
-    previousTitle,
-    previousHref,
-    mobileAlign = 'left',
-    help,
-    actions,
-    actionsDisplay = 'both',
-    className = '',
-  }) => {
-    const renderPrevTitle = (
-      <span className="hidden lg:inline truncate">{previousTitle}</span>
-    )
-    const renderPrevIcon = (
-      <Icon
-        icon="arrowLeft"
-        size={4}
-        className="inline-flex mr-3 -mt-1"
-        block
-      />
-    )
-    const renderPrevLink = () => {
-      if (!previousHref && !Link) {
-        // Previous page don't have link
-        return <span className="duration-200">{renderPrevTitle}</span>
-      }
-      if (Link) {
-        // Previous page using custom link element
-        return (
-          <Link className="hover:text-on-base duration-200">
-            {renderPrevIcon}
-            {renderPrevTitle}
-          </Link>
-        )
-      }
-      // Default previous link
-      return (
-        <a className="hover:text-on-base duration-200" href={previousHref}>
-          {renderPrevIcon}
-          {renderPrevTitle}
-        </a>
-      )
-    }
-
-    return (
-      <div
-        aria-label="breadcrumbs"
-        className={`header-navigation flex items-center justify-between mb-4 lg:mb-7 ${className}`}
-      >
-        <div
-          className={`header-navigation-breadcrumb max-w-full truncate w-full`}
-        >
-          <div className="w-full inline-flex self-center items-center font-semibold tracking-5 text-f5 sm:text-f4 lg:text-f3">
-            {(previousTitle || previousHref || Link) && (
-              <span className="header-navigation-previous inline-flex items-center text-on-base-2 text-xl -mr-px truncate">
-                {renderPrevLink()}
-                {previousTitle && (
-                  <span className="hidden lg:inline px-2 -ml-px"> / </span>
-                )}
-              </span>
-            )}
-            <span
-              className={`header-navigation-current text-on-base truncate leading-relaxed ${
-                mobileAlign === 'center'
-                  ? 'w-full lg:w-auto text-center lg:text-left'
-                  : ''
-              }`}
-            >
-              {currentTitle}
-            </span>
-          </div>
-        </div>
-        <div className="header-navigation-content flex shrink-0 max-w-1/2 items-center flex-grow justify-end gap-5 ml-2 whitespace-nowrap">
-          <div className="header-navigation-help help flex items-center">
-            {help && (
-              <HelpLink
-                text={help.title}
-                mobileText={help.mobileText}
-                as="hyperLink"
-                href={help.href}
-              />
-            )}
-          </div>
-          {actions && (
-            <div
-              className={`header-navigation-actions items-center gap-5 ${
-                actionsDisplayClass[actionsDisplay] || ''
-              }`}
-            >
-              {actions}
-            </div>
-          )}
-        </div>
-      </div>
-    )
-  }
-)
-
-export interface BreadcrumbProps {
-  /**
-   * Custom class name
-   * */
-  className?: string
-  /**
-   * Current page title
-   * */
-  currentTitle: string | React.ReactNode
-  /**
-   * Previous page title
-   * */
-  previousTitle?: string | React.ReactNode
-  /**
-   * Previous page href
-   * */
-  previousHref?: string
-  /**
-   * Custom link component (replace <a>)
-   * Example: `const Link = (props: any) => { return  <a href="https://www.google.com" target="_blank" className={`underline ` + props.className}>{props.children}</a> }`
-   * */
-  Link?: React.ElementType
-  /** Aligment of `currentTitle` at mobile
-   * @default 'left'
-   * */
-  mobileAlign?: 'left' | 'center'
-  /**
-   * Help link (external page)
-   * */
-  help?: {
-    title?: string
-    href: string
-    mobileText?: boolean
-  }
-  /**
-   * Custom actions and buttons
-   * */
-  actions?: React.ReactNode
-  /** Should show actions only at one resolution or always
-   * @default 'both'
-   * */
-  actionsDisplay?: 'desktop' | 'mobile' | 'both'
-}

package/src/Navigation/Pagination/Pagination.spec.tsx

@@ -1,45 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./Pagination.stories"
-
-const { Default, WithoutItems, WithLengthOptions } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Pagination tests'), () => {
-
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('.pagination .pagination-info').within(() => {
-      cy.get('.pagination-info-current').contains('2')
-      cy.get('.pagination-info-total').contains('123')
-    })
-    cy.get('.pagination .pagination-nav').within(() => {
-      cy.get('.pagination-nav-current').contains('2')
-      cy.get('.pagination-nav-total').contains('10')
-
-      let alerted = ''
-      cy.on('window:alert', msg => alerted = msg)
-      cy.get('.pagination-nav-total').click().then(() => (expect(alerted).to.match(/10/), alerted = ''))
-      cy.get('.pagination-nav-previous').click().then(() => (expect(alerted).to.match(/1/), alerted = ''))
-      cy.get('.pagination-nav-next').click().then(() => (expect(alerted).to.match(/3/), alerted = ''))
-      cy.get('.pagination-nav-current').type('{backspace}{del}6{enter}').then(() => (expect(alerted).to.match(/6/), alerted = ''))
-      cy.get('.pagination-nav-current').type('15{enter}').then(() => (expect(alerted).to.match(/10/), alerted = ''))
-    })
-  })
-
-  it('WithoutItems', () => {
-    mount(<WithoutItems />)
-    cy.get('.pagination .pagination-info').should('not.be.exist')
-    cy.get('.pagination .pagination-nav').should('be.exist')
-  })
-
-  it('WithLengthOptions', () => {
-    mount(<WithLengthOptions />)
-    cy.get('.pagination .pagination-info').within(() => {
-      cy.get('select').should('be.exist')
-      cy.get('select option').should('have.length', 3)
-    })
-  })
-
-})

package/src/Navigation/Pagination/Pagination.stories.tsx

@@ -1,39 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Pagination, PaginationProps } from '.'
-
-export default {
-  title: 'Navigation/Pagination',
-  component: Pagination,
-  parameters: {
-    layout: 'padded',
-  },
-  args: {
-    onPageChange: (page: any) => { alert(`To page: ${page}`) },
-    totalPages: 10,
-  }
-} as Meta
-
-const Template: Story<PaginationProps> = args => <Pagination {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  currentItemsLength: 2,
-  totalItemsLength: 123,
-  currentPage: 2,
-}
-
-export const WithoutItems = Template.bind({})
-
-export const WithLengthOptions = Template.bind({})
-WithLengthOptions.args = {
-  currentItemsLength: 5,
-  totalItemsLength: 123,
-  onItemsLengthChange: (e: any) => { alert(`Selected length: ${e}`) },
-  itemsLengthOptions: [
-    { label: `Mostrando 20`, value: 20 },
-    { label: 'Mostrando 50', value: 50 },
-    { label: 'Mostrando 100', value: 100 },
-  ]
-}

package/src/Navigation/Pagination/PaginationInfo.tsx

@@ -1,70 +0,0 @@
-import React from 'react'
-
-import { Select } from '../../Forms/Select'
-
-const PaginationInfoComponent = ({
-  currentItemsLength,
-  totalItemsLength = 0,
-  itemsLengthOptions,
-  onItemsLengthChange,
-}: PaginationInfoProps) => {
-  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedOption = event.currentTarget.value
-    onItemsLengthChange && onItemsLengthChange(selectedOption)
-  }
-
-  if (!currentItemsLength && currentItemsLength !== 0) return null
-
-  const maxItemsLength = Math.max(currentItemsLength, totalItemsLength)
-
-  return (
-    <div className="pagination-info hidden sm:flex">
-      <div className="flex items-center mr-5 text-inverted-2 tracking-4 text-f6">
-        {itemsLengthOptions ? (
-          <Select
-            id="selectItemsPerPage"
-            options={itemsLengthOptions}
-            withoutStyle
-            aria-label="Itens por página"
-            onChange={handleChange}
-          />
-        ) : (
-          <span>
-            Mostrando{' '}
-            <span className="pagination-info-current">
-              {currentItemsLength}
-            </span>
-          </span>
-        )}
-        &nbsp;de&nbsp;
-        <span className="pagination-info-total">{maxItemsLength}</span>
-        &nbsp;no total
-      </div>
-    </div>
-  )
-}
-
-export const PaginationInfo = PaginationInfoComponent
-
-export interface PaginationInfoProps {
-  /**
-   * Current length of items at page
-   * */
-  currentItemsLength?: number
-  /**
-   * Total length of items available
-   * */
-  totalItemsLength?: number
-  /**
-   * Options of length available
-   * @deprecated Refactor required (Change to array of numbers and selectedLength)
-   * */
-  itemsLengthOptions?: {
-    label: string | number
-    value?: string | number | boolean
-  }[]
-  /**
-   * Function to run when items length is changed
-   * */
-  onItemsLengthChange?: (arg0: string | number) => any
-}

package/src/Navigation/Pagination/PaginationNav.tsx

@@ -1,122 +0,0 @@
-import React, { useRef } from 'react'
-
-import { Icon } from '../../Icons/Icon'
-
-const PaginationNavComponent = ({
-  currentPage = 1,
-  totalPages = 1,
-  onPageChange,
-}: PaginationNavProps) => {
-  const inputEl = useRef<HTMLSpanElement>(null)
-  const maxTotalPages = Math.max(currentPage, totalPages)
-  const hasNext = currentPage < totalPages
-  const hasPrev = currentPage > 1
-
-  const handleChange = (page: number) => {
-    page = page < 1 ? 1 : page > maxTotalPages ? maxTotalPages : page
-    onPageChange && onPageChange(page)
-  }
-
-  const onPreventDefault = (e: any) => {
-    e.preventDefault()
-    return false
-  }
-
-  const handleKeyDown = (e: any) => {
-    if (e.which >= 35 && e.which <= 39) {
-      return
-    }
-    if (e.which === 46 || e.which === 8) {
-      return
-    }
-    if (e.which === 13) {
-      const currentValue = inputEl?.current?.innerText
-      if (currentValue) {
-        const page = parseInt(currentValue)
-        handleChange(page)
-      }
-      e.preventDefault()
-      return
-    }
-    if (isNaN(parseInt(String.fromCharCode(e.which)))) {
-      e.preventDefault()
-    }
-    return
-  }
-
-  return (
-    <div className="pagination-nav flex items-center justify-between w-full sm:w-auto">
-      <div className="text-inverted-2 text-f6 tracking-4">
-        <span
-          id="btnPaginationActualPage"
-          className="pagination-nav-current inline-block w-9 bg-base-1 border border-card-stroke/50 rounded font-semibold leading-8 text-center text-primary"
-          ref={inputEl}
-          contentEditable={true}
-          suppressContentEditableWarning={true}
-          onKeyDown={handleKeyDown}
-          onCopy={onPreventDefault}
-          onCut={onPreventDefault}
-          onPaste={onPreventDefault}
-        >
-          {currentPage}
-        </span>{' '}
-        /{' '}
-        <button
-          type="button"
-          id="btnPaginationLastPage"
-          className="pagination-nav-total focus:outline-none"
-          onClick={() => {
-            if (currentPage !== maxTotalPages) handleChange(maxTotalPages)
-          }}
-        >
-          {maxTotalPages}
-        </button>
-      </div>
-      <div className="text-inverted-2 ml-5 flex items-center">
-        <button
-          type="button"
-          id="btnPaginationPrev"
-          className={`pagination-nav-previous mr-3 duration-200 outline-none ${
-            hasPrev ? 'hover:text-inverted-1' : ''
-          }`}
-          aria-label="Ir para página anterior"
-          onClick={() => {
-            if (hasPrev) handleChange(currentPage - 1)
-          }}
-        >
-          <Icon icon="arrowLeft" block size={4} />
-        </button>
-        <button
-          type="button"
-          id="btnPaginationNext"
-          className={`pagination-nav-next duration-200 outline-none ${
-            hasNext ? 'hover:text-inverted-1' : ''
-          }`}
-          aria-label="Ir para próxima página"
-          onClick={() => {
-            if (hasNext) handleChange(currentPage + 1)
-          }}
-        >
-          <Icon icon="arrowRight" block size={4} />
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export const PaginationNav = PaginationNavComponent
-
-export interface PaginationNavProps {
-  /** Define selected page.
-   * @default 1
-   * */
-  currentPage?: number
-  /** Define total count of pages.
-   * @default 1
-   * */
-  totalPages?: number
-  /**
-   * Function to run when page is changed.
-   * */
-  onPageChange?: (arg0: number) => any
-}

package/src/Navigation/Pagination/index.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-
-import { PaginationInfo, PaginationInfoProps } from './PaginationInfo'
-import { PaginationNav, PaginationNavProps } from './PaginationNav'
-
-const PaginationComponent = ({
-  className = '',
-  currentPage = 1,
-  totalPages = 1,
-  onPageChange,
-  currentItemsLength,
-  totalItemsLength,
-  itemsLengthOptions,
-  onItemsLengthChange,
-}: PaginationProps) => {
-  return (
-    <div
-      className={`pagination flex flex-wrap justify-end items-center leading-4 sm:justify-between ${className}`}
-    >
-      <PaginationInfo
-        currentItemsLength={currentItemsLength}
-        totalItemsLength={totalItemsLength}
-        itemsLengthOptions={itemsLengthOptions}
-        onItemsLengthChange={onItemsLengthChange}
-      />
-      <PaginationNav
-        currentPage={currentPage}
-        totalPages={totalPages}
-        onPageChange={onPageChange}
-      />
-    </div>
-  )
-}
-
-export const Pagination = React.memo(PaginationComponent)
-
-export interface PaginationProps
-  extends PaginationInfoProps,
-    PaginationNavProps {
-  /**
-   * Custom class name
-   * */
-  className?: string
-}

package/src/Navigation/Stepper/Stepper.spec.tsx

@@ -1,68 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./Stepper.stories"
-
-const { Default, NoText, WithText, HandleClick, CustomStepClassName } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Stepper tests'), () => {
-
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('#stepsContainer').within(() => {
-      cy.get('#stepCircle1').should('have.class', 'bg-primary').contains('1')
-      cy.get('#stepCircle2').should('have.class', 'bg-inverted-1').contains('2')
-      cy.get('#stepCircle3').should('have.class', 'bg-base-4').contains('3')
-    })
-  })
-
-  it('NoText', () => {
-    mount(<NoText />)
-    cy.get('#stepsContainer').within(() => {
-      cy.get('#stepCircle1').should('have.class', 'bg-primary').contains('1')
-      cy.get('#rightLinkStep1').should('have.class', 'absolute').and('have.class', '-right-5').and('have.class', 'bg-primary')
-      cy.get('#stepCircle2').should('have.class', 'bg-inverted-1').contains('2')
-      cy.get('#leftLinkStep2').should('have.class', 'absolute').and('have.class', '-left-5').and('have.class', 'bg-primary')
-      cy.get('#rightLinkStep2').should('have.class', 'absolute').and('have.class', '-right-5').and('have.class', 'bg-base-4')
-      cy.get('#stepCircle3').should('have.class', 'bg-base-4').contains('3')
-      cy.get('#leftLinkStep3').should('have.class', 'absolute').and('have.class', '-left-5').and('have.class', 'bg-base-4')
-    })
-  })
-
-  it('WithText', () => {
-    mount(<WithText />)
-    cy.get('#stepsContainer').within(() => {
-      cy.get('#stepCircle1').should('have.class', 'bg-primary').contains('1')
-      cy.get('#step1 span').should('have.class', 'text-center').contains('Step 1')
-      cy.get('#rightLinkStep1').should('not.exist')
-      cy.get('#step2 span').should('have.class', 'text-center').contains('Step 2')
-      cy.get('#leftLinkStep2').should('not.exist')
-      cy.get('#rightLinkStep2').should('not.exist')
-      cy.get('#step3 span').should('have.class', 'text-center').contains('Step 3')
-      cy.get('#leftLinkStep3').should('not.exist')
-    })
-  })
-
-  it('HandleClick', () => {
-    mount(<HandleClick />)
-    cy.get('#stepsContainer').within(() => {
-      cy.get('#stepCircle1').should('have.class', 'bg-primary').contains('1')
-      cy.get('#stepCircle1').should(() => {alert(`Clicked on step 1!`)})
-      cy.get('#stepCircle2').should('have.class', 'bg-inverted-1').contains('2')
-      cy.get('#stepCircle2').should(() => {alert(`Clicked on step 2!`)})
-      cy.get('#stepCircle3').should('have.class', 'bg-base-4').contains('3')
-      cy.get('#stepCircle3').should(() => {alert(`Clicked on step 3!`)})
-    })
-  })
-
-  it('CustomStepClassName', () => {
-    mount(<CustomStepClassName />)
-    cy.get('#stepsContainer').within(() => {
-      cy.get('#stepCircle1').should('have.class', '!bg-primary-light').and('have.class', '!border-primary').and('have.class', '!text-primary').contains('1')
-      cy.get('#stepCircle2').should('have.class', '!bg-warning-light').and('have.class', '!border-warning').and('have.class', '!text-warning').contains('2')
-      cy.get('#stepCircle3').should('have.class', '!bg-danger-light').and('have.class', '!border-danger').and('have.class', '!text-danger').contains('3')
-    })
-  })
-
-})

package/src/Navigation/Stepper/Stepper.stories.tsx

@@ -1,68 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Stepper, StepperProps } from '.'
-
-export default {
-  title: 'Navigation/Stepper',
-  component: Stepper,
-  parameters: {
-    layout: 'padded',
-  }
-} as Meta
-
-const Template: Story<StepperProps> = args => <Stepper {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  steps: [
-    {step: 1, text: 'Step 1'},
-    {step: 2, text: 'Step 2'},
-    {step: 3, text: 'Step 3'}
-  ],
-  currentStep: 2
-}
-
-export const NoText = Template.bind({})
-NoText.args = {
-  steps: [
-    {step: 1, text: 'Step 1'},
-    {step: 2, text: 'Step 2'},
-    {step: 3, text: 'Step 3'}
-  ],
-  currentStep: 2,
-  showText: false
-}
-
-export const WithText = Template.bind({})
-WithText.args = {
-  steps: [
-    {step: 1, text: 'Step 1'},
-    {step: 2, text: 'Step 2'},
-    {step: 3, text: 'Step 3'}
-  ],
-  currentStep: 2,
-  showText: true
-}
-
-export const HandleClick = Template.bind({})
-HandleClick.args = {
-  steps: [
-    {step: 1, text: 'Step 1', handleClick: () => alert(`Clicked on step 1!`)},
-    {step: 2, text: 'Step 2', handleClick: () => alert(`Clicked on step 2!`)},
-    {step: 3, text: 'Step 3', handleClick: () => alert(`Clicked on step 3!`)}
-  ],
-  currentStep: 2,
-  showText: false,
-}
-
-export const CustomStepClassName = Template.bind({})
-CustomStepClassName.args = {
-  steps: [
-    {step: 1, text: 'Step 1', customClassName: '!text-primary !bg-primary-light !border-primary'},
-    {step: 2, text: 'Step 2', customClassName: '!text-warning !bg-warning-light !border-warning'},
-    {step: 3, text: 'Step 3', customClassName: '!text-danger !bg-danger-light !border-danger'}
-  ],
-  currentStep: 2,
-  showText: false
-}