@loja-integrada/admin-components 0.19.4 → 1.0.0

package/src/Forms/InputHelpText/InputHelpText.stories.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { InputHelpText, InputHelpTextProps } from '.'
-
-export default {
-  title: 'Forms/InputHelpText',
-  component: InputHelpText,
-} as Meta
-
-const Template: Story<InputHelpTextProps> = args => <InputHelpText {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  helpText: 'Texto de ajuda para preencher o campo'
-}

package/src/Forms/InputHelpText/InputHelpText.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-
-export const InputHelpText = React.memo(
-  ({ className = '', helpText, hasError = false }: InputHelpTextProps) => {
-    if (!helpText) return null
-    return (
-      <div
-        className={`input-help-text text-xs tracking-4 leading-4 ${
-          hasError ? 'text-danger' : 'text-on-base-2'
-        } ${className}`}
-      >
-        {helpText}
-      </div>
-    )
-  }
-)
-
-export interface InputHelpTextProps {
-  /**
-   * Custom class name
-   * */
-  className?: string
-  /**
-   * Help text
-   * */
-  helpText?: string
-  /** Should render error state
-   * @default false
-   * */
-  hasError?: boolean
-}

package/src/Forms/InputHelpText/index.ts

@@ -1 +0,0 @@
-export * from './InputHelpText'

package/src/Forms/InputLabel/InputLabel.spec.tsx

@@ -1,30 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./InputLabel.stories"
-
-const { Default, WithComplement } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('InputLabel tests'), () => {
-
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('label')
-      .should('have.class', 'input-label')
-      .contains('Label')
-  })
-
-  it('Error', () => {
-    mount(<Default hasError required />)
-    cy.get('label')
-      .should('have.class', 'text-danger')
-      .contains('Label*')
-  })
-
-  it('WithComplement', () => {
-    mount(<WithComplement />)
-    cy.get('label .ml-2 svg').should('exist')
-  })
-
-})

package/src/Forms/InputLabel/InputLabel.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { Icon } from '../../Icons'
-
-import { InputLabel, InputLabelProps } from '.'
-
-export default {
-  title: 'Forms/InputLabel',
-  component: InputLabel,
-} as Meta
-
-const Template: Story<InputLabelProps> = args => <InputLabel {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  label: 'Label'
-}
-
-export const WithComplement = Template.bind({})
-WithComplement.args = {
-  label: 'Label',
-  labelComplement: <Icon icon="infoCircle" size={4} block />,
-  required: true,
-}

package/src/Forms/InputLabel/InputLabel.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-
-export const InputLabel = React.memo(
-  ({
-    className = '',
-    label,
-    labelComplement,
-    hasError = false,
-    required = false,
-    htmlFor,
-  }: InputLabelProps) => {
-    if (!label) return null
-    return (
-      <label
-        className={`input-label text-f6 tracking-4 leading-6 font-semibold inline-flex items-center mb-0.5 ${
-          hasError ? 'text-danger' : 'text-on-base'
-        } ${className}`}
-        htmlFor={htmlFor}
-      >
-        {`${label}${required ? '*' : ''}`}
-        {labelComplement && <span className="ml-2">{labelComplement}</span>}
-      </label>
-    )
-  }
-)
-
-export interface InputLabelProps {
-  /**
-   * Custom class name
-   * */
-  className?: string
-  /**
-   * Label title
-   * */
-  label?: string
-  /**
-   * Complement to label title
-   * */
-  labelComplement?: string | React.ReactNode
-  /** Should render error state
-   * @default false
-   * */
-  hasError?: boolean
-  /** Input is required
-   * @default false
-   * */
-  required?: boolean
-  /**
-   * Input this label is for
-   * */
-  htmlFor?: string
-}

package/src/Forms/InputLabel/index.ts

@@ -1 +0,0 @@
-export * from './InputLabel'

package/src/Forms/InputMask/InputMask.spec.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react'
-import { composeStories } from '@storybook/testing-react'
-import { mount } from '@cypress/react'
-import * as stories from './InputMask.stories'
-
-const {
-  Default,
-  Date,
-  OnlyNumbers,
-  ZipCode,
-  Nfe,
-  Phone,
-  Cellphone,
-  PhoneOrCellphone,
-  CPF,
-  CNPJ,
-} = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Input Mask tests'), () => {
-  it('Default', () => {
-    mount(<Default />)
-    const val = '12345678'
-    const valMasked = '12345-678'
-    cy.get('input').type(val).should('have.value', valMasked)
-  })
-
-  it('Date', () => {
-    mount(<Date defaultValue="" />)
-    const val = '12111990'
-    const valMasked = '12/11/1990'
-    cy.get('input').type(val).should('have.value', valMasked)
-  })
-
-  it('OnlyNumbers', () => {
-    mount(<OnlyNumbers />)
-    const val = '123abc123ab/gttr[]55'
-    const valMasked = '12312355'
-    cy.get('input').type(val).should('have.value', valMasked)
-  })
-
-  it('ZipCode', () => {
-    mount(<ZipCode />)
-    const val = '21310310'
-    const valMasked = '21310-310'
-    cy.get('input').type(val).should('have.value', valMasked)
-  })
-
-  it('Nfe', () => {
-    mount(<Nfe />)
-    const val = '32191105570714000825550010059146621133082968'
-    const valMasked = '3219 1105 5707 1400 0825 5500 1005 9146 6211 3308 2968'
-    cy.get('input').type(val).should('have.value', valMasked)
-  })
-
-  it('Phone', () => {
-    mount(<Phone />)
-    const val = '2139774179'
-    const valMasked = '(21) 3977-4179'
-    cy.get('input').type(val).should('have.value', valMasked)
-  })
-
-  it('Cellphone', () => {
-    mount(<Cellphone />)
-    const val = '21970100616'
-    const valMasked = '(21) 97010-0616'
-    cy.get('input').type(val).should('have.value', valMasked)
-  })
-
-  it('PhoneOrCellphone - Phone', () => {
-    mount(<PhoneOrCellphone />)
-    const val = '2139774179'
-    const valMasked = '(21) 3977-4179'
-    cy.get('input').clear().type(val).should('have.value', valMasked)
-  })
-
-  it('PhoneOrCellphone - Cellphone', () => {
-    mount(<PhoneOrCellphone />)
-    const val = '21901234567'
-    const valMasked = '(21) 90123-4567'
-    cy.get('input').clear().type(val).should('have.value', valMasked)
-  })
-
-  it('CPF', () => {
-    mount(<CPF />)
-    const val = '99648135037'
-    const valMasked = '996.481.350-37'
-    cy.get('input').clear().type(val).should('have.value', valMasked)
-  })
-
-  it('CNPJ', () => {
-    mount(<CNPJ />)
-    const val = '86806289000156'
-    const valMasked = '86.806.289/0001-56'
-    cy.get('input').clear().type(val).should('have.value', valMasked)
-  })
-})

package/src/Forms/InputMask/InputMask.stories.tsx

@@ -1,126 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { InputMask, InputMaskProps } from '.'
-import { Icon } from '../../Icons'
-
-export default {
-  title: 'Forms/InputMask',
-  component: InputMask,
-  args: {
-    label: 'Masked Input',
-  },
-} as Meta
-
-const Template: Story<InputMaskProps> = (args) => <InputMask {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  mask: [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/],
-}
-
-export const Date = Template.bind({})
-Date.args = {
-  formatValue: 'date',
-  defaultValue: '10/11/1990',
-  name: 'birthday',
-  placeholder: '00/00/0000',
-}
-
-export const OnlyNumbers = Template.bind({})
-OnlyNumbers.args = {
-  formatValue: 'onlyNumber',
-}
-
-export const OnlyText = Template.bind({})
-OnlyText.args = {
-  formatValue: 'onlyText',
-  onChange: (a) => {
-    console.log(a.target.value)
-  },
-}
-
-export const ZipCode = Template.bind({})
-ZipCode.args = {
-  formatValue: 'zipCode',
-  defaultValue: '21310310',
-  onChange: (a) => {
-    console.log(a.target.value)
-  },
-}
-
-export const Nfe = Template.bind({})
-Nfe.args = {
-  formatValue: 'nfe',
-  defaultValue: '32191105570714000825550010059146621133082968',
-  onChange: (a) => {
-    console.log(a.target.value)
-  },
-}
-
-export const Phone = Template.bind({})
-Phone.args = {
-  formatValue: 'phone',
-  defaultValue: '2139774179',
-  onChange: (a) => {
-    console.log(a.target.value)
-  },
-}
-
-export const Cellphone = Template.bind({})
-Cellphone.args = {
-  formatValue: 'cellphone',
-  defaultValue: '21970100616',
-  onChange: (a) => {
-    console.log(a.target.value)
-  },
-}
-
-export const PhoneOrCellphone = Template.bind({})
-PhoneOrCellphone.args = {
-  formatValue: 'phoneOrCellphone',
-  defaultValue: '21970100616',
-  onChange: (a) => {
-    console.log(a.target.value)
-  },
-}
-
-export const CPF = Template.bind({})
-CPF.args = {
-  formatValue: 'cpf',
-  defaultValue: '52517738033',
-  onChange: (a) => {
-    console.log(a.target.value)
-  },
-}
-
-export const CNPJ = Template.bind({})
-CNPJ.args = {
-  formatValue: 'cnpj',
-  defaultValue: '03167626000185',
-  onChange: (a) => {
-    console.log(a.target.value)
-  },
-}
-
-export const DateWithStartAdornment = Template.bind({})
-DateWithStartAdornment.args = {
-  formatValue: 'date',
-  defaultValue: '10/11/1990',
-  prefix: <Icon icon="clock" />,
-}
-
-export const DateWithEndAdornment = Template.bind({})
-DateWithEndAdornment.args = {
-  formatValue: 'date',
-  defaultValue: '10/11/1990',
-  sufix: <Icon icon="clock" />,
-}
-
-export const DateWithEndAdornmentError = Template.bind({})
-DateWithEndAdornmentError.args = {
-  formatValue: 'date',
-  defaultValue: '10/11/1990',
-  sufix: <Icon icon="clock" />,
-  hasError: true,
-}

package/src/Forms/InputMask/InputMask.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import ReactTextMask, {
-  MaskedInputProps as ReactMaskedInputProps,
-} from 'react-text-mask'
-
-import { composeRefs } from '../../utils'
-import { Input, InputProps } from '../Input'
-import { formatValuePatterns } from './utils'
-
-function InputMaskComponent(
-  { formatValue = 'default', prefix, ...props }: InputMaskProps,
-  inputRef: React.ForwardedRef<HTMLInputElement>
-) {
-  const renderInput = (ref: (inputElement: HTMLElement) => void, p: any) => {
-    return <Input ref={composeRefs(inputRef, ref)} {...p} />
-  }
-  const formatValueProps = formatValuePatterns[formatValue] || {}
-
-  const mergedProps = {
-    ...formatValueProps,
-    ...props,
-  }
-  if (!mergedProps.mask) {
-    mergedProps.mask = false
-  }
-
-  return (
-    <ReactTextMask
-      render={renderInput}
-      {...mergedProps}
-      prefix={prefix as string}
-    />
-  )
-}
-
-export const InputMask = React.forwardRef(InputMaskComponent)
-
-export interface InputMaskProps extends InputProps {
-  /**
-   * Predefined masks. When used, will replace passed `mask` attr
-   * */
-  formatValue?: keyof typeof formatValuePatterns
-  mask?: ReactMaskedInputProps['mask']
-  guide?: ReactMaskedInputProps['guide']
-  placeholderChar?: ReactMaskedInputProps['placeholderChar']
-  keepCharPositions?: ReactMaskedInputProps['keepCharPositions']
-  pipe?: ReactMaskedInputProps['pipe']
-  showMask?: ReactMaskedInputProps['showMask']
-}
-
-export type InputMaskType = ReactMaskedInputProps['mask']

package/src/Forms/InputMask/index.ts

@@ -1 +0,0 @@
-export * from './InputMask'

package/src/Forms/InputMask/maskDate.ts

@@ -1,81 +0,0 @@
-const maxValueMonth = [31, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
-const formatOrder = ['yyyy', 'yy', 'mm', 'dd', 'HH', 'MM', 'SS']
-export default function createAutoCorrectedDatePipe(
-  dateFormat = 'mm dd yyyy',
-  { minYear = 1, maxYear = 9999 } = {}
-) {
-  const dateFormatArray: any = dateFormat
-    .split(/[^dmyHMS]+/)
-    .sort((a, b) => formatOrder.indexOf(a) - formatOrder.indexOf(b))
-  return function (conformedValue: any) {
-    const indexesOfPipedChars: any = []
-    const maxValue = {
-      dd: 31,
-      mm: 12,
-      yy: 99,
-      yyyy: maxYear,
-      HH: 23,
-      MM: 59,
-      SS: 59,
-    }
-    const minValue = { dd: 1, mm: 1, yy: 0, yyyy: minYear, HH: 0, MM: 0, SS: 0 }
-    const conformedValueArr = conformedValue.split('')
-
-    // Check first digit
-    dateFormatArray.forEach((format: keyof typeof maxValue) => {
-      const position = dateFormat.indexOf(format)
-      const maxFirstDigit = parseInt(
-        maxValue[format].toString().substr(0, 1),
-        10
-      )
-
-      if (parseInt(conformedValueArr[position], 10) > maxFirstDigit) {
-        conformedValueArr[position + 1] = conformedValueArr[position]
-        conformedValueArr[position] = 0
-        indexesOfPipedChars.push(position)
-      }
-    })
-
-    // Check for invalid date
-    let month = 0
-    const isInvalid = dateFormatArray.some((format: keyof typeof maxValue) => {
-      const position = dateFormat.indexOf(format)
-      const length = format.length
-      const textValue = conformedValue
-        .substr(position, length)
-        .replace(/\D/g, '')
-      const value = parseInt(textValue, 10)
-      if (format === 'mm') {
-        month = value || 0
-      }
-      const maxValueForFormat =
-        format === 'dd' ? maxValueMonth[month] : maxValue[format]
-      if (format === 'yyyy' && (minYear !== 1 || maxYear !== 9999)) {
-        const scopedMaxValue = parseInt(
-          maxValue[format].toString().substring(0, textValue.length),
-          10
-        )
-        const scopedMinValue = parseInt(
-          minValue[format].toString().substring(0, textValue.length),
-          10
-        )
-        return value < scopedMinValue || value > scopedMaxValue
-      }
-      return (
-        value > maxValueForFormat ||
-        (textValue.length === length && value < minValue[format])
-      )
-    })
-
-    // TODO: This if prevent from breaking when `defaultValue` is an invalid date
-    // !indexesOfPipedChars.length
-    if (isInvalid && !indexesOfPipedChars.length) {
-      return false
-    }
-
-    return {
-      value: conformedValueArr.join(''),
-      indexesOfPipedChars,
-    }
-  }
-}

package/src/Forms/InputMask/utils.ts

@@ -1,154 +0,0 @@
-import maskDate from './maskDate'
-/* docs: https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md */
-
-export const formatValuePatterns = {
-  default: {},
-  onlyNumber: {
-    mask: (rawValue: any) => {
-      const onlyNumbers = rawValue.replace(/\D/g, '').split('')
-      return onlyNumbers.map(() => /\d/)
-    },
-    inputMode: 'decimal',
-  },
-  onlyLetter: {
-    mask: (rawValue: any) => {
-      const onlyLetter = rawValue.replace(/[^A-zÀ-ú]/g, '').split('')
-      return onlyLetter.map(() => /[A-zÀ-ú]/)
-    },
-  },
-  onlyAlphanumeric: {
-    mask: (rawValue: any) => {
-      const onlyAlphanumeric = rawValue.replace(/\W/g, '').split('')
-      return onlyAlphanumeric.map(() => /\w/)
-    },
-  },
-  onlyText: {
-    mask: (rawValue: any) => {
-      const onlyText = rawValue.replace(/[^a-zA-ZÀ-ú'˜0-9\sü]/g, '').split('')
-      return onlyText.map(() => /[a-zA-ZÀ-ú'˜`´^0-9\sü]/g)
-    },
-  },
-  date: {
-    mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
-    pipe: maskDate('dd/mm/yyyy'),
-    keepCharPositions: true,
-    inputMode: 'decimal',
-    placeholder: '__/__/____',
-  },
-  zipCode: {
-    mask: [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/],
-    keepCharPositions: true,
-    inputMode: 'decimal',
-    placeholder: '_____-___',
-  },
-  nfe: {
-    mask: () => {
-      const maxLength = 44
-      const mask = []
-      for (let i = 1; i <= maxLength; i++) {
-        mask.push(/\d/)
-        if (i % 4 === 0 && i !== maxLength) mask.push(' ')
-      }
-      return mask
-    },
-    keepCharPositions: true,
-    inputMode: 'decimal',
-    placeholder: '____ ____ ____ ____ ____ ____ ____ ____ ____ ____ ____',
-  },
-  phone: {
-    mask: [
-      '(',
-      /\d/,
-      /\d/,
-      ')',
-      ' ',
-      /\d/,
-      /\d/,
-      /\d/,
-      /\d/,
-      '-',
-      /\d/,
-      /\d/,
-      /\d/,
-      /\d/,
-    ],
-    inputMode: 'decimal',
-    placeholder: '(__) ____-____',
-  },
-  cellphone: {
-    mask: [
-      '(',
-      /\d/,
-      /\d/,
-      ')',
-      ' ',
-      /\d/,
-      /\d/,
-      /\d/,
-      /\d/,
-      /\d/,
-      '-',
-      /\d/,
-      /\d/,
-      /\d/,
-      /\d/,
-    ],
-    inputMode: 'decimal',
-    placeholder: '(__) _____-____',
-  },
-  phoneOrCellphone: {
-    mask: (rawValue: any) => {
-      const cleanedText = rawValue.replace(/[^\d]/g, '')
-      if (cleanedText.length > 10) return formatValuePatterns.cellphone.mask
-      else return formatValuePatterns.phone.mask
-    },
-    inputMode: 'decimal',
-    placeholder: '(__) _____-____',
-  },
-  cpf: {
-    mask: [
-      /\d/,
-      /\d/,
-      /\d/,
-      '.',
-      /\d/,
-      /\d/,
-      /\d/,
-      '.',
-      /\d/,
-      /\d/,
-      /\d/,
-      '-',
-      /\d/,
-      /\d/,
-    ],
-    keepCharPositions: true,
-    inputMode: 'decimal',
-    placeholder: '___.___.___-__',
-  },
-  cnpj: {
-    mask: [
-      /\d/,
-      /\d/,
-      '.',
-      /\d/,
-      /\d/,
-      /\d/,
-      '.',
-      /\d/,
-      /\d/,
-      /\d/,
-      '/',
-      /\d/,
-      /\d/,
-      /\d/,
-      /\d/,
-      '-',
-      /\d/,
-      /\d/,
-    ],
-    keepCharPositions: true,
-    inputMode: 'decimal',
-    placeholder: '___.___.___-__',
-  },
-}