@loja-integrada/admin-components 0.19.4 → 1.0.0

package/src/Forms/Input/Input.stories.tsx

@@ -1,170 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Icon } from '../../Icons'
-import { Input, InputProps } from '.'
-
-export default {
-  title: 'Forms/Input',
-  component: Input,
-} as Meta
-
-const Template: Story<InputProps> = (args) => <Input {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  placeholder: 'Digite aqui',
-  name: 'nome',
-}
-
-export const Error = Template.bind({})
-Error.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  errorMessage: 'Campo obrigatório',
-  name: 'nome',
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  defaultValue: "Can't change",
-  disabled: true,
-}
-
-export const Readonly = Template.bind({})
-Readonly.args = {
-  defaultValue: "Can't change",
-  readOnly: true,
-}
-
-export const Prefix = Template.bind({})
-Prefix.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  prefix: 'R$',
-  name: 'valor',
-}
-
-export const PrefixWithoutBorder = Template.bind({})
-PrefixWithoutBorder.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  prefix: 'R$',
-  prefixBorder: false,
-  name: 'valor',
-}
-
-export const IconPrefix = Template.bind({})
-IconPrefix.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  prefix: <Icon icon="cog" />,
-  hasError: true,
-  name: 'nome',
-}
-
-export const IconPrefixWhitoutBorder = Template.bind({})
-IconPrefixWhitoutBorder.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  prefix: <Icon icon="search" />,
-  prefixBorder: false,
-  hasError: true,
-  name: 'nome',
-}
-
-export const Sufix = Template.bind({})
-Sufix.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  sufix: 'R$',
-  name: 'valor',
-}
-export const SufixWithoutBorder = Template.bind({})
-SufixWithoutBorder.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  sufix: 'R$',
-  sufixBorder: false,
-  name: 'valor',
-}
-export const IconSufix = Template.bind({})
-IconSufix.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  sufix: <Icon icon="cog" />,
-  hasError: true,
-  name: 'nome',
-}
-export const IconSufixWithoutBorder = Template.bind({})
-IconSufixWithoutBorder.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  sufix: <Icon icon="cog" />,
-  sufixBorder: false,
-  hasError: true,
-  name: 'nome',
-}
-
-export const PrefixDisabled = Template.bind({})
-PrefixDisabled.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  prefix: 'R$',
-  disabled: true,
-  value: '123',
-}
-
-export const PrefixReadOnly = Template.bind({})
-PrefixReadOnly.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  prefix: 'R$',
-  readOnly: true,
-  value: '123',
-}
-
-export const WithBoth = Template.bind({})
-WithBoth.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  prefix: 'R$',
-  sufix: <Icon icon="cog" />,
-  name: 'valor',
-}
-
-export const WithBothWithoutBorder = Template.bind({})
-WithBothWithoutBorder.args = {
-  label: 'Meu Campo',
-  helpText: 'Texto de ajuda para preencher o campo',
-  prefix: 'R$',
-  sufix: <Icon icon="search" />,
-  prefixBorder: false,
-  sufixBorder: false,
-  name: 'valor',
-}
-
-export const WithLabelComplement = Template.bind({})
-WithLabelComplement.args = {
-  label: 'Label',
-  labelComplement: <Icon icon="infoCircle" size={4} block />,
-  required: true,
-  name: 'nome',
-}
-
-export const Search = Template.bind({})
-Search.args = {
-  type: "search",
-  sufix: (
-    <button
-      type="submit"
-      className="w-full h-full flex items-center justify-center text-tertiary hover:text-primary"
-    >
-      <Icon icon="search" block />
-    </button>
-  ),
-  sufixBorder: false,
-  name: 'search',
-}

package/src/Forms/Input/Input.tsx

@@ -1,158 +0,0 @@
-import React from 'react'
-
-import { InputLabel, InputLabelProps } from '../InputLabel'
-import { InputHelpText, InputHelpTextProps } from '../InputHelpText'
-import {
-  inputContainerDisabledClasses,
-  inputContainerReadonlyClasses,
-  errorBorderClasses,
-  defaultBorderClasses,
-  inputContainerClasses,
-  variantClasses,
-  prefixClasses,
-  sufixClasses,
-  focusClass,
-} from '../commonStyles'
-
-const InputComponent = (
-  {
-    className = '',
-    label,
-    labelComplement,
-    helpText,
-    hasError = false,
-    errorMessage,
-    required = false,
-    id,
-    name,
-    variant = 'default',
-    disabled,
-    readOnly,
-    type = 'text',
-    prefix,
-    sufix,
-    prefixBorder = true,
-    sufixBorder = true,
-    ...props
-  }: InputProps,
-  ref: React.ForwardedRef<HTMLInputElement>
-) => {
-  const inputId = id || name
-  const hasErrorState = hasError || !!errorMessage
-
-  const prefixClass = `${prefixClasses} ${variantClasses[variant]} ${
-    hasErrorState ? errorBorderClasses : ''
-  }`
-
-  const sufixClass = `${sufixClasses} ${variantClasses[variant]} ${
-    hasErrorState ? errorBorderClasses : ''
-  }`
-
-  let inputContainerClass = `${inputContainerClasses} ${variantClasses[variant]}`
-  if (disabled) {
-    inputContainerClass += ` ${defaultBorderClasses} ${inputContainerDisabledClasses}`
-  } else if (readOnly) {
-    inputContainerClass += ` ${defaultBorderClasses} ${inputContainerReadonlyClasses}`
-  } else if (hasErrorState) {
-    inputContainerClass += ` ${errorBorderClasses}`
-  } else {
-    inputContainerClass += ` ${defaultBorderClasses}`
-  }
-
-  const inputClass = `w-full tracking-4 px-4 appearance-none shadow-none outline-none bg-transparent box-border ${focusClass} ${
-    hasErrorState ? errorBorderClasses : defaultBorderClasses
-  } ${prefix && prefixBorder ? 'border-l' : ''}  ${
-    sufix && sufixBorder ? 'border-r' : ''
-  } ${prefix && !prefixBorder ? 'pl-0' : ''} ${
-    sufix && !sufixBorder ? 'pr-0' : ''
-  }`
-
-  const LabelComponent = (
-    <InputLabel
-      label={label}
-      labelComplement={labelComplement}
-      required={required}
-      hasError={hasErrorState}
-      htmlFor={inputId}
-      className="mb-1"
-    />
-  )
-
-  const HelpTextComponent = (
-    <InputHelpText
-      helpText={errorMessage || helpText}
-      hasError={hasErrorState}
-      className="mt-2"
-    />
-  )
-
-  return (
-    <div className={`form-group flex flex-col ${className}`}>
-      {LabelComponent}
-      <div className={inputContainerClass}>
-        {prefix && (
-          <label htmlFor={inputId} className={prefixClass}>
-            {prefix}
-          </label>
-        )}
-        <input
-          ref={ref}
-          type={type}
-          id={inputId}
-          name={name}
-          required={required}
-          disabled={disabled}
-          readOnly={readOnly}
-          className={inputClass}
-          {...props}
-        />
-        {sufix && (
-          <label htmlFor={inputId} className={sufixClass}>
-            {sufix}
-          </label>
-        )}
-      </div>
-
-      {HelpTextComponent}
-    </div>
-  )
-}
-
-const InputWithFowardRef = React.forwardRef(InputComponent)
-export const Input = React.memo(InputWithFowardRef)
-
-export interface InputProps
-  extends InputLabelProps,
-    InputHelpTextProps,
-    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
-  /**
-   * Custom class name
-   * */
-  className?: string
-  /** Input size
-   * @default default
-   * */
-  variant?: 'default' | 'small' | 'large' | 'xlarge'
-  /**
-   * Error message to display
-   * */
-  errorMessage?: string
-  /**
-   * Custom element to append at the start of input
-   * */
-  prefix?: React.ReactNode | string | null
-  /**
-   * Custom element to append at the end of input
-   * */
-  sufix?: React.ReactNode | string | null
-  /**
-   * Set visibility of input prefix border
-   * @default true
-   * */
-  prefixBorder?: boolean
-  /**
-   * Set visibility of input sufix border
-   * @default true
-   * */
-  sufixBorder?: boolean
-}

package/src/Forms/Input/index.ts

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

package/src/Forms/InputCurrency/InputCurrency.spec.tsx

@@ -1,32 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./InputCurrency.stories"
-
-const { Default, MaxValue, CurrencyUSD } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Input Currency tests'), () => {
-
-  it('Default', () => {
-    mount(<Default />)
-    const val = '456.88'
-    const valMasked = '456,88'
-    cy.get('input').type(val).should('have.value', valMasked)
-    cy.get('label.input-label').contains('Currency Input')
-  })
-
-  it('MaxValue', () => {
-    mount(<MaxValue />)
-    const val = '19.999,99'
-    const valMasked = '2.000,00'
-    cy.get('input').type(val).should('have.value', valMasked)
-  })
-
-  it('CurrencyUSD', () => {
-    mount(<CurrencyUSD />)
-    const val = '1,234.56'
-    cy.get('input').should('have.value', val)
-  })
-
-})

package/src/Forms/InputCurrency/InputCurrency.stories.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { InputCurrency, InputCurrencyProps } from '.'
-
-export default {
-  title: 'Forms/InputCurrency',
-  component: InputCurrency,
-  args: {
-    label: 'Currency Input',
-    currency: 'BRL',
-  },
-} as Meta
-
-const Template: Story<InputCurrencyProps> = (args) => (
-  <InputCurrency {...args} />
-)
-
-export const Default = Template.bind({})
-
-export const MaxValue = Template.bind({})
-MaxValue.args = {
-  helpText: 'Valor máximo R$ 2.000,00',
-  max: 2000,
-}
-
-export const CurrencyUSD = Template.bind({})
-CurrencyUSD.args = {
-  currency: 'USD',
-  defaultValue: 1234.56,
-}
-
-export const OnChange = Template.bind({})
-OnChange.args = {
-  onChange: (_event, value, _maskedValue) => {
-    console.log(value)
-  },
-}
-
-export const OnFocusWithStartAdornment = Template.bind({})
-OnFocusWithStartAdornment.args = {
-  onFocus: (_event, value, _maskedValue) => {
-    console.log(value)
-  },
-  prefix: 'R$',
-}

package/src/Forms/InputCurrency/InputCurrency.tsx

@@ -1,224 +0,0 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react'
-
-import { Input, InputProps } from '../Input'
-import { composeRefs } from '../../utils'
-import { formatCurrency, defaultMaxValue, defaultIntlConfig } from './utils'
-
-export const InputCurrencyComponent = (
-  {
-    value = 0,
-    defaultValue,
-    config = defaultIntlConfig,
-    currency = 'BRL',
-    max = defaultMaxValue,
-    autoFocus = false,
-    autoSelect = false,
-    autoReset = false,
-    onChange = () => null,
-    onBlur = () => null,
-    onFocus = () => null,
-    onKeyPress = () => null,
-    ...otherProps
-  }: InputCurrencyProps,
-  ref: React.ForwardedRef<HTMLInputElement>
-) => {
-  config = config[currency]
-
-  const inputRef = useCallback(
-    (node) => {
-      const isActive = node === document.activeElement
-      if (node && autoFocus && !isActive) {
-        node.focus()
-      }
-    },
-    [autoFocus]
-  )
-
-  const [maskedValue, setMaskedValue] = useState<string | number>('0')
-
-  // to prevent a malformed config object
-  const safeConfig = useMemo(
-    () => () => {
-      const {
-        format: { maximumFractionDigits },
-      } = config
-      const finalConfig = {
-        ...defaultIntlConfig[currency],
-        ...config,
-      }
-      // at the moment this prevents problems when converting numbers
-      // with zeroes in-between, otherwise 205 would convert to 25.
-      finalConfig.format.minimumFractionDigits = maximumFractionDigits
-      return finalConfig
-    },
-    [currency, config]
-  )
-
-  const clean = (number: any) => {
-    if (typeof number === 'number') {
-      return number
-    }
-
-    // strips everything that is not a number (positive or negative)
-    return Number(number.toString().replace(/[^0-9-]/g, ''))
-  }
-
-  const normalizeValue = (number: any) => {
-    const {
-      format: { maximumFractionDigits },
-    } = safeConfig()
-    let safeNumber = number
-
-    if (typeof number === 'string') {
-      safeNumber = clean(number)
-
-      if (safeNumber % 1 !== 0) {
-        safeNumber = safeNumber.toFixed(maximumFractionDigits)
-      }
-    } else {
-      // all input numbers must be a float point (for the cents portion). This is a fallback in case of integer ones.
-      safeNumber = Number.isInteger(number)
-        ? Number(number) * 10 ** maximumFractionDigits
-        : number.toFixed(maximumFractionDigits)
-    }
-
-    // divide it by 10 power the maximum fraction digits.
-    return clean(safeNumber) / 10 ** maximumFractionDigits
-  }
-
-  const calculateValues = (inputFieldValue: any) => {
-    const value = normalizeValue(inputFieldValue)
-    const maskedValue = formatCurrency(value, safeConfig())
-
-    return [value, maskedValue]
-  }
-
-  const updateValues = (value: any) => {
-    const [calculatedValue, calculatedMaskedValue] = calculateValues(value)
-
-    if ((!max && max !== 0) || calculatedValue <= max) {
-      setMaskedValue(calculatedMaskedValue)
-      return [calculatedValue, calculatedMaskedValue]
-    } else {
-      const [maxCalculatedValue, maxCalculatedMaskedValue] =
-        calculateValues(max)
-      setMaskedValue(maxCalculatedMaskedValue)
-      return [maxCalculatedValue, maxCalculatedMaskedValue]
-    }
-  }
-
-  const handleChange = (event: any) => {
-    event.preventDefault()
-
-    const [value, maskedValue] = updateValues(event.target.value)
-
-    if (maskedValue) {
-      onChange(event, value, maskedValue)
-    }
-  }
-
-  const handleBlur = (event: any) => {
-    const [value, maskedValue] = updateValues(event.target.value)
-    if (autoReset) {
-      calculateValues(0)
-    }
-    if (maskedValue) {
-      onBlur(event, value, maskedValue)
-    }
-  }
-
-  const handleFocus = (event: any) => {
-    if (autoSelect) {
-      event.target.select()
-    }
-    const [value, maskedValue] = updateValues(event.target.value)
-    if (maskedValue) {
-      onFocus(event, value, maskedValue)
-    }
-  }
-
-  const handleKeyUp = (event: any) =>
-    onKeyPress(event, event.key, event.keyCode)
-
-  useEffect(() => {
-    const currentValue = value || defaultValue || 0
-    const [, maskedValue] = calculateValues(currentValue)
-    setMaskedValue(maskedValue)
-    // eslint-disable-next-line
-  }, [currency, value, defaultValue, config])
-
-  return (
-    <Input
-      {...otherProps}
-      ref={composeRefs(inputRef, ref)}
-      value={maskedValue}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      onKeyUp={handleKeyUp}
-      inputMode="decimal"
-    />
-  )
-}
-
-export const InputCurrency = React.forwardRef(InputCurrencyComponent)
-
-export interface InputCurrencyProps
-  extends Omit<InputProps, 'onChange' | 'onBlur' | 'onFocus' | 'onKeyPress'> {
-  /** Currency to format value to
-   * @default 'BRL'
-   * */
-  currency?: keyof typeof defaultIntlConfig
-  /** Max value allowed
-   * @default 1000000000000000
-   * */
-  max?: number
-  /** Custom Intl config
-   * @deprecated Don't use, component already has its default config
-   * */
-  config?: any
-  /** Should auto focus
-   * @default false
-   * */
-  autoFocus?: boolean
-  /** Should auto select
-   * @default false
-   * */
-  autoSelect?: boolean
-  /** Should auto reset
-   * @default false
-   * */
-  autoReset?: boolean
-  /**
-   * onChange with additional params: (event, value, maskedValue)
-   * */
-  onChange?: (
-    arg0: InputEvent,
-    arg1: string | number,
-    arg2: string | number
-  ) => void
-  /**
-   * onBlur with additional params: (event, value, maskedValue)
-   * */
-  onBlur?: (
-    arg0: InputEvent,
-    arg1: string | number,
-    arg2: string | number
-  ) => void
-  /**
-   * onFocus with additional params: (event, value, maskedValue)
-   * */
-  onFocus?: (
-    arg0: InputEvent,
-    arg1: string | number,
-    arg2: string | number
-  ) => void
-  /**
-   * onKeyPress with additional params: (event, key, keyCode)
-   * */
-  onKeyPress?: (
-    arg0: InputEvent,
-    arg1: string | number,
-    arg2: string | number
-  ) => void
-}

package/src/Forms/InputCurrency/index.ts

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

package/src/Forms/InputCurrency/utils.ts

@@ -1,36 +0,0 @@
-export function formatCurrency(value: string | number, localeConfig: any) {
-  const numberConfig = localeConfig.format
-  const currencyOptions = new global.Intl.NumberFormat(
-    localeConfig.locale,
-    numberConfig
-  ).resolvedOptions()
-
-  return value.toLocaleString(localeConfig.locale, {
-    ...currencyOptions,
-    style: 'decimal',
-  })
-}
-
-// Above this value, Intl can't convert
-export const defaultMaxValue = 1000000000000000
-
-export const defaultIntlConfig = {
-  BRL: {
-    locale: 'pt-BR',
-    format: {
-      style: 'currency',
-      currency: 'BRL',
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    },
-  },
-  USD: {
-    locale: 'en-US',
-    format: {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    },
-  },
-}

package/src/Forms/InputHelpText/InputHelpText.spec.tsx

@@ -1,22 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./InputHelpText.stories"
-
-const { Default } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('InputHelpText tests'), () => {
-
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('div.input-help-text')
-      .contains('Texto de ajuda')
-  })
-
-  it('Error', () => {
-    mount(<Default hasError />)
-    cy.get('div.input-help-text').should('have.class', 'text-danger')
-  })
-
-})