@loja-integrada/admin-components 0.16.2 → 0.17.0

package/package.json

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

package/src/Forms/Dropdown/Dropdown.tsx

@@ -19,32 +19,49 @@ export const sizeClasses = {
   xlarge: 'h-24',
 }
 
+export const valueFontSizesClasses = {
+  default: 'text-f6',
+  small: 'text-f7',
+  large: 'text-f5',
+  xlarge: 'text-f4',
+}
+
 export const variantControlClasses = {
-  default: 'border-card-stroke rounded',
+  default: 'border-card-stroke rounded pl-2',
   secondary:
-    'border-inverted-2 hover:bg-base-3 rounded-md focus:ring-2 focus:ring-focus focus:ring-offset-2 focus:bg-base-1',
+    'border-inverted-2 hover:bg-base-3 rounded-md focus:ring-2 focus:ring-focus focus:ring-offset-2 focus:bg-base-1 pl-2',
+  simple: 'border-none',
 }
 
 export const variantValueClasses = {
-  default: 'font-normal',
-  secondary: 'font-semibold',
+  default: 'font-normal text-on-base',
+  secondary: 'font-semibold text-on-base',
+  simple: 'font-normal text-on-base',
 }
 
 export const variantSelectedClasses = {
   default: '',
   secondary: 'bg-base-1 shadow-inner',
+  simple: 'bg-transparent',
 }
 
 export const variantDisabledClasses = {
   default: 'cursor-not-allowed opacity-70',
   secondary: 'cursor-not-allowed opacity-90 bg-base-4 border-base-4',
+  simple: 'cursor-not-allowed opacity-70',
 }
 
 export const varianErrorClasses = {
   default: 'border-danger rounded',
   secondary: 'border-danger rounded-md',
+  simple: '',
 }
 
+export const valueContainerStyles = {
+  default: { paddingLeft: 8 },
+  secondary: { paddingLeft: 8 },
+  simple: { paddingLeft: 0 },
+}
 export interface CustomOptionProps {
   value: string | number
   label: string
@@ -57,7 +74,9 @@ export interface CustomGroupedOptionsProps {
   options: CustomOptionProps[]
 }
 
-export type DropdownVariant = 'default' | 'secondary'
+export type DropdownVariant = 'default' | 'secondary' | 'simple'
+export type DropdownSizes = keyof typeof sizeClasses
+export type DropdownValueFontSizes = keyof typeof valueFontSizesClasses
 
 const {
   Option,
@@ -90,11 +109,11 @@ const CustomControl = (
   props: React.PropsWithChildren<
     ControlProps<CustomOptionProps, false, GroupTypeBase<CustomOptionProps>>
   >,
-  size: keyof typeof sizeClasses,
+  size: DropdownSizes,
   variant: DropdownVariant,
   errorMessage?: string
 ) => {
-  const controlClasses = `cursor-pointer transition-all flex itens-center border pl-2 ${
+  const controlClasses = `cursor-pointer transition-all flex itens-center border  ${
     errorMessage ? varianErrorClasses[variant] : variantControlClasses[variant]
   } ${sizeClasses[size]} ${
     props.menuIsOpen ? variantSelectedClasses[variant] : ''
@@ -155,18 +174,23 @@ const CustomPlaceholder = (
     CustomOptionProps,
     false,
     GroupTypeBase<CustomOptionProps>
-  >
+  >,
+  fontSize: DropdownValueFontSizes
 ) => (
-  <Placeholder {...props} className="text-f6 tracking-4 w-full pr-2 truncate" />
+  <Placeholder
+    {...props}
+    className={`tracking-4 w-full pr-2 truncate ${valueFontSizesClasses[fontSize]}`}
+  />
 )
 
 const CustomSingleValue = (
   props: SingleValueProps<CustomOptionProps, GroupTypeBase<CustomOptionProps>>,
-  variant: DropdownVariant
+  variant: DropdownVariant,
+  fontSize: DropdownValueFontSizes
 ) => (
   <SingleValue
     {...props}
-    className={`text-f6 tracking-4 text-on-base text-sm truncate ${variantValueClasses[variant]}`}
+    className={`tracking-4 truncate ${variantValueClasses[variant]} ${valueFontSizesClasses[fontSize]}`}
   />
 )
 
@@ -197,6 +221,7 @@ const DropdownComponent = (
     menuPlacement = 'auto',
     menuWidth = '100%',
     menuHorizontalPlacement,
+    valueFontSize = 'default',
   }: DropdownProps,
   ref: React.ForwardedRef<any>
 ) => {
@@ -212,6 +237,7 @@ const DropdownComponent = (
         className="mb-1"
       />
       <Select
+        id={inputId}
         ref={ref}
         className={`w-full text-inverted-2`}
         classNamePrefix="select"
@@ -258,6 +284,9 @@ const DropdownComponent = (
               maxWidth: 'calc(100% - 6px)',
             }
           },
+          valueContainer: (base) => {
+            return { ...base, ...valueContainerStyles[variant] }
+          },
           input: (base) => {
             return {
               ...base,
@@ -275,8 +304,9 @@ const DropdownComponent = (
           DropdownIndicator: (props) => CustomDropdownIndicator(props),
           Control: (props) => CustomControl(props, size, variant, errorMessage),
           GroupHeading: (props) => CustomGroupHeading(props),
-          Placeholder: (props) => CustomPlaceholder(props),
-          SingleValue: (props) => CustomSingleValue(props, variant),
+          Placeholder: (props) => CustomPlaceholder(props, valueFontSize),
+          SingleValue: (props) =>
+            CustomSingleValue(props, variant, valueFontSize),
         }}
       />
       <InputHelpText
@@ -303,9 +333,14 @@ export interface DropdownProps {
    * Changes the size of dropdown
    * @default default
    * */
-  size?: keyof typeof sizeClasses
+  size?: DropdownSizes
   /**
-   * Changes the size of dropdown
+   * Changes the size of selected value
+   * @default default
+   * */
+  valueFontSize?: DropdownValueFontSizes
+  /**
+   * Changes the variant of dropdown
    * @default default
    * */
   variant?: DropdownVariant

package/src/Forms/FloatingLabelInput/FloatingLabelInput.spec.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { composeStories } from '@storybook/testing-react'
+import { mount } from '@cypress/react'
+import * as stories from './FloatingLabelInput.stories'
+
+const { Default, Prefix, IconPrefix, WithBoth } = composeStories(stories)
+
+describe('Input tests', () => {
+  it('Default', () => {
+    mount(<Default />)
+    const val = 'Preencher campo'
+    cy.get('input').type(val).should('have.value', val)
+  })
+
+  it('Sufix and Prefix', () => {
+    mount(<Prefix />)
+    cy.get('.adornment').contains('R$')
+
+    mount(<IconPrefix />)
+    cy.get('svg').should('have.class', 'icon-cog').parent('label')
+
+    mount(<WithBoth />)
+    cy.get('.adornment').should('have.length', 2)
+  })
+})

package/src/Forms/FloatingLabelInput/FloatingLabelInput.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import { Icon } from '../../Icons'
+import {
+  FloatingLabelInput,
+  FloatingLabelInputProps,
+} from './FloatingLabelInput'
+
+export default {
+  title: 'Forms/FloatingLabelInput',
+  component: FloatingLabelInput,
+} as Meta
+
+const Template: Story<FloatingLabelInputProps> = (args) => (
+  <FloatingLabelInput {...args} />
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Meu Campo',
+  name: 'nome',
+  id: 'campo',
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  label: 'Meu Campo',
+  name: 'nome',
+  id: 'campo',
+}
+
+export const Prefix = Template.bind({})
+Prefix.args = {
+  label: 'Meu Campo',
+  prefix: 'R$',
+  name: 'valor',
+  id: 'campo',
+}
+
+export const IconPrefix = Template.bind({})
+IconPrefix.args = {
+  label: 'Meu Campo',
+  prefix: <Icon icon="cog" />,
+  name: 'nome',
+  id: 'campo',
+}
+
+export const Sufix = Template.bind({})
+Sufix.args = {
+  label: 'Meu Campo',
+  sufix: 'R$',
+  name: 'valor',
+  id: 'campo',
+}
+
+export const IconSufix = Template.bind({})
+IconSufix.args = {
+  label: 'Meu Campo',
+  sufix: <Icon icon="cog" />,
+  name: 'nome',
+  id: 'campo',
+}
+
+export const WithBoth = Template.bind({})
+WithBoth.args = {
+  label: 'Meu Campo',
+  prefix: 'R$',
+  sufix: <Icon icon="cog" />,
+  name: 'valor',
+  id: 'campo',
+}

package/src/Forms/FloatingLabelInput/FloatingLabelInput.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+
+const FloatingLabelInputComponent = (
+  {
+    prefix,
+    sufix,
+    id,
+    type = 'text',
+    placeholder = ' ',
+    label,
+    showLabel = false,
+    className = '',
+    ...props
+  }: FloatingLabelInputProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+) => {
+  const peerFocusLabelClasses = `peer-focus:text-f7 peer-focus:-translate-y-4 ${
+    prefix ? 'peer-focus:pl-0' : ''
+  } `
+  const peerPlaceholderShowLabelClasses = `${
+    prefix ? 'peer-placeholder-shown:pl-8' : ''
+  } peer-placeholder-shown:translate-y-0 peer-placeholder-shown:text-f4 `
+  const labelClassName = `cursor-text absolute text-f7 text-inverted-2 duration-300 transform -translate-y-4 top-5 z-10 origin-[0] ${peerFocusLabelClasses} ${peerPlaceholderShowLabelClasses}`
+
+  const inputClassName = `block text-f4 ${prefix ? 'pl-7' : ''} ${
+    sufix ? 'pr-6' : ''
+  } w-full border-none appearance-none peer focus:outline-none bg-transparent pb-2.5 pt-5 ${
+    className ? className : ''
+  }`
+
+  return (
+    <div className="relative">
+      {prefix && (
+        <label
+          htmlFor={id}
+          className="adornment absolute left-0 top-5 w-8 h-8 flex items-center justify-start"
+        >
+          {prefix}
+        </label>
+      )}
+      <input
+        ref={ref}
+        type={type}
+        id={id}
+        className={inputClassName}
+        placeholder={placeholder}
+        {...props}
+      />
+      {showLabel && (
+        <label htmlFor={id} className={labelClassName}>
+          {label}
+        </label>
+      )}
+      {sufix && (
+        <label
+          htmlFor={id}
+          className="adornment absolute right-0 top-5 w-8 h-8 flex items-center justify-end"
+        >
+          {sufix}
+        </label>
+      )}
+    </div>
+  )
+}
+
+const InputWithFowardRef = React.forwardRef(FloatingLabelInputComponent)
+export const FloatingLabelInput = React.memo(InputWithFowardRef)
+
+export interface FloatingLabelInputProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'prefix' | 'sufix'
+  > {
+  prefix?: React.ReactNode
+  sufix?: React.ReactNode
+  label?: string
+  showLabel?: boolean
+  className?: string
+  textArea?: false
+}

package/src/Forms/FloatingLabelInput/index.ts

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

package/src/Forms/FloatingLabelInputCurrency/FloatingLabelInputCurrency.spec.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { composeStories } from '@storybook/testing-react'
+import { mount } from '@cypress/react'
+import * as stories from './FloatingLabelInputCurrency.stories'
+
+const { Default } = composeStories(stories)
+
+describe('FloatingLabelInputCurrency tests', () => {
+  it('Default', () => {
+    mount(<Default />)
+    const val = '456.88'
+    const valMasked = '456,88'
+    cy.get('input').type(val).should('have.value', valMasked)
+  })
+})

package/src/Forms/FloatingLabelInputCurrency/FloatingLabelInputCurrency.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import { Icon } from '../../Icons'
+import {
+  FloatingLabelInputCurrency,
+  FloatingLabelInputCurrencyProps,
+} from './FloatingLabelInputCurrency'
+
+export default {
+  title: 'Forms/FloatingLabelInputCurrency',
+  component: FloatingLabelInputCurrency,
+} as Meta
+
+const Template: Story<FloatingLabelInputCurrencyProps> = (args) => (
+  <FloatingLabelInputCurrency {...args} />
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Meu Campo',
+  name: 'nome',
+  id: 'campo',
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  label: 'Meu Campo',
+  name: 'nome',
+  id: 'campo',
+}
+
+export const Prefix = Template.bind({})
+Prefix.args = {
+  label: 'Meu Campo',
+  prefix: 'R$',
+  name: 'valor',
+  id: 'campo',
+}
+
+export const IconPrefix = Template.bind({})
+IconPrefix.args = {
+  label: 'Meu Campo',
+  prefix: <Icon icon="cog" />,
+  name: 'nome',
+  id: 'campo',
+}
+
+export const Sufix = Template.bind({})
+Sufix.args = {
+  label: 'Meu Campo',
+  sufix: 'R$',
+  name: 'valor',
+  id: 'campo',
+}
+
+export const IconSufix = Template.bind({})
+IconSufix.args = {
+  label: 'Meu Campo',
+  sufix: <Icon icon="cog" />,
+  name: 'nome',
+  id: 'campo',
+}
+
+export const WithBoth = Template.bind({})
+WithBoth.args = {
+  label: 'Meu Campo',
+  prefix: 'R$',
+  sufix: <Icon icon="cog" />,
+  name: 'valor',
+  id: 'campo',
+}

package/src/Forms/FloatingLabelInputCurrency/FloatingLabelInputCurrency.tsx

@@ -0,0 +1,251 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { composeRefs } from '../../utils'
+import { FloatingLabelInput } from '../FloatingLabelInput/FloatingLabelInput'
+import {
+  defaultIntlConfig,
+  defaultMaxValue,
+  formatCurrency,
+} from '../InputCurrency/utils'
+
+const FloatingLabelInputCurrencyComponent = (
+  {
+    value,
+    defaultValue,
+    config = defaultIntlConfig,
+    currency = 'BRL',
+    max = defaultMaxValue,
+    autoFocus = false,
+    autoSelect = false,
+    autoReset = false,
+    onChange = () => null,
+    onBlur = () => null,
+    onFocus = () => null,
+    onKeyPress = () => null,
+    prefix,
+    sufix,
+    id,
+    type = 'text',
+    placeholder = ' ',
+    label,
+    showLabel = true,
+    ...props
+  }: FloatingLabelInputCurrencyProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+) => {
+  config = config[currency]
+
+  max = Number(max)
+
+  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 (
+    <FloatingLabelInput
+      {...props}
+      type={type}
+      id={id}
+      placeholder={placeholder}
+      onBlur={handleBlur}
+      onChange={handleChange}
+      onKeyUp={handleKeyUp}
+      onFocus={handleFocus}
+      ref={composeRefs(inputRef, ref)}
+      value={maskedValue}
+      inputMode="decimal"
+      label={label}
+      showLabel={showLabel}
+      prefix={prefix}
+      sufix={sufix}
+    />
+  )
+}
+
+const InputWithFowardRef = React.forwardRef(FloatingLabelInputCurrencyComponent)
+export const FloatingLabelInputCurrency = React.memo(InputWithFowardRef)
+
+export interface FloatingLabelInputCurrencyProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'prefix' | 'sufix' | 'onChange' | 'onBlur' | 'onFocus' | 'onKeyPress'
+  > {
+  prefix?: React.ReactNode
+  sufix?: React.ReactNode
+  label?: string
+  showLabel?: boolean
+  /** Currency to format value to
+   * @default 'BRL'
+   * */
+  currency?: keyof typeof defaultIntlConfig
+  /** Max value allowed
+   * @default 1000000000000000
+   * */
+  max?: number | string
+  /** 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/FloatingLabelInputCurrency/index.ts

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