@loja-integrada/admin-components 0.19.3 → 1.0.0-beta.0

package/src/Forms/Checkbox/Checkbox.tsx

@@ -1,166 +0,0 @@
-import React from 'react'
-import { InputHelpText, InputHelpTextProps } from '../InputHelpText'
-
-const CheckboxComponent = (
-  {
-    className = '',
-    label,
-    id,
-    name,
-    onChange,
-    checked,
-    disabled,
-    indeterminate = false,
-    boxAlign = 'center',
-    helpText,
-    hasError = false,
-    errorMessage,
-    ...props
-  }: CheckboxProps,
-  ref: React.ForwardedRef<HTMLInputElement>
-) => {
-  const inputRef = React.useRef<HTMLInputElement>(null)
-  const inputId = id || name
-  const [isChecked, setIsChecked] = React.useState(!!checked || false)
-  const [isIndeterminate, setIsIndeterminate] = React.useState(
-    !!indeterminate || false
-  )
-  const isCenterBoxAlign = boxAlign === 'center'
-  const hasErrorState = hasError || !!errorMessage
-
-  React.useEffect(() => {
-    setIsChecked(!!checked)
-    if (checked) setIsIndeterminate(false)
-  }, [checked])
-
-  React.useEffect(() => {
-    setIsIndeterminate(!!indeterminate)
-    if (indeterminate) setIsChecked(false)
-    if (inputRef.current) inputRef.current.indeterminate = !!indeterminate
-  }, [indeterminate])
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (disabled) return
-    setIsChecked(event.target.checked)
-    setIsIndeterminate(false)
-    onChange && onChange(event)
-  }
-  const checkboxIconClasses = `transition duration-200 ease-in-out ${
-    isChecked || isIndeterminate ? 'scale-100' : 'scale-0'
-  }`
-
-  const checkboxIconContainerClasses = `border border-card-stroke transition duration-200 ease-in-out
-    ${
-      disabled
-        ? 'bg-base-4'
-        : isChecked || isIndeterminate
-        ? 'bg-primary border-primary'
-        : 'bg-base-1'
-    }
-    ${isCenterBoxAlign ? 'items-center' : ''}
-    rounded w-4 h-4 flex justify-center m-px
-  `
-
-  const checkboxLabelClasses = `ml-1 input-label text-f6 tracking-4 leading-6 ${
-    hasErrorState ? 'text-danger' : disabled ? 'text-inverted-2' : ''
-  }`
-
-  const alignOptions = {
-    start: 'items-start',
-    end: 'items-end',
-    center: 'items-center',
-    baseline: 'items-baseline',
-    stretch: 'items-stretch',
-  }
-
-  const HelpTextComponent = (
-    <InputHelpText
-      helpText={errorMessage || helpText}
-      hasError={hasErrorState}
-      className="mt-2"
-    />
-  )
-
-  return (
-    <div className={`inline-block ${className}`}>
-      <label
-        htmlFor={inputId}
-        className={`inline-flex ${alignOptions[boxAlign]} cursor-pointer`}
-      >
-        <span className="relative rounded z-10 flex items-center justify-center focus-within:ring-2 ring-focus">
-          <input
-            ref={ref || inputRef}
-            type="checkbox"
-            id={inputId}
-            name={name}
-            className="opacity-0 absolute h-4 w-4 z-10 cursor-pointer"
-            checked={isChecked}
-            onChange={handleChange}
-            disabled={!!disabled}
-            {...props}
-          />
-          <div className={checkboxIconContainerClasses}>
-            <svg
-              width="12"
-              height="12"
-              viewBox={`0 0 10 ${isChecked ? '10' : '2'}`}
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              className={checkboxIconClasses}
-            >
-              {isChecked || (isChecked && disabled) ? (
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M3.33353 8.86651C3.10353 8.86651 2.88353 8.77518 2.72087 8.61318L0.0541992 5.94651L1.27953 4.72051L3.31753 6.75851L9.03887 0.736511L10.2949 1.93051L3.96153 8.59718C3.80087 8.76651 3.5782 8.86384 3.34487 8.86651H3.33353Z"
-                  fill="white"
-                />
-              ) : (
-                isIndeterminate && (
-                  <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M0 1.99998H10V0.333313H0V1.99998Z"
-                    fill="white"
-                  />
-                )
-              )}
-            </svg>
-          </div>
-        </span>
-        <span className={checkboxLabelClasses}>{label}</span>
-      </label>
-      {HelpTextComponent}
-    </div>
-  )
-}
-
-const CheckboxWithFowardRef = React.forwardRef(CheckboxComponent)
-export const Checkbox = React.memo(CheckboxWithFowardRef)
-
-export interface CheckboxProps
-  extends InputHelpTextProps,
-    React.InputHTMLAttributes<HTMLInputElement> {
-  /**
-   * Custom class name
-   * */
-  className?: string
-  /**
-   * Text label of the checkbox
-   * */
-  label?: string | React.ReactNode
-  /**
-   * Checkbox box isn't selected nwither unselected
-   * @default false
-   * */
-  indeterminate?: boolean
-  /**
-   * Item align
-   * @default 'center'
-   * */
-  boxAlign?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
-  /**
-   * Error message to display
-   * */
-  errorMessage?: string
-}

package/src/Forms/Checkbox/index.tsx

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

package/src/Forms/Dropdown/Dropdown.spec.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react'
-import { composeStories } from '@storybook/testing-react'
-import { mount } from '@cypress/react'
-import * as stories from './Dropdown.stories'
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-
-const { Default, Empty, Disabled, Searchable } = composeStories(stories)
-
-describe(specTitle('Dropdown tests'), () => {
-  it('Default', () => {
-    mount(<Default />)
-    const val = 'Selecione um item'
-    cy.get('.select__placeholder').contains(val)
-  })
-
-  it('Empty', () => {
-    mount(<Empty />)
-    const val = 'Não foram encontradas opções'
-    cy.get('.select__control').click()
-    cy.get('.select__menu-notice--no-options').contains(val)
-  })
-
-  it('Disabled', () => {
-    mount(<Disabled />)
-    cy.get('input').should('be.disabled')
-    cy.get('.select__control').should(
-      'have.class',
-      'select__control--is-disabled'
-    )
-  })
-
-  it('Searchable', () => {
-    mount(<Searchable />)
-    const val = 'Teste'
-    cy.get('input').invoke('attr', 'value', val)
-    cy.get('input').should('have.value', val)
-  })
-})

package/src/Forms/Dropdown/Dropdown.stories.tsx

@@ -1,152 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Dropdown, DropdownProps, CustomOptionProps } from './'
-import { Icon } from '../../Icons'
-
-const dropdownOptions = [
-  { label: 'Visualizar 15', value: 15 },
-  { label: 'Visualizar 50', value: 50, isDisabled: true, icon: 'cog' },
-  { label: 'Visualizar 100', value: 100 },
-  { label: 'Visualizar todos os itens', value: 1000 },
-]
-
-export default {
-  title: 'Forms/Dropdown',
-  component: Dropdown,
-  args: {
-    options: dropdownOptions,
-    onChange: (e: CustomOptionProps) => {
-      alert(`Item ${e.label}: ${e.value}`)
-    },
-  },
-} as Meta
-
-const Template: Story<DropdownProps> = (args) => (
-  <div className="w-48">
-    <Dropdown {...args} />
-  </div>
-)
-
-export const Default = Template.bind({})
-Default.args = {
-  placeholder: 'Selecione um item na lista',
-}
-
-export const Empty = Template.bind({})
-Empty.args = {
-  placeholder: 'Selecione um item',
-  options: [],
-  emptyMessage: 'Não foram encontradas opções',
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  placeholder: 'Selecione um item',
-  disabled: true,
-}
-
-export const Searchable = Template.bind({})
-Searchable.args = {
-  placeholder: 'Selecione um item',
-  isSearchable: true,
-}
-
-export const FixedValue = Template.bind({})
-FixedValue.args = {
-  placeholder: 'Selecione um item',
-  fixedValue: { label: 'Saiba mais', value: '1' },
-}
-
-export const CustomSize = Template.bind({})
-CustomSize.args = {
-  placeholder: 'Selecione um item',
-  size: 'large',
-}
-
-export const Grouped = Template.bind({})
-Grouped.args = {
-  placeholder: 'Selecione um item',
-  options: [
-    {
-      label: 'Ajuda',
-      options: [
-        { label: 'Visualizar 15', value: '15' },
-        { label: 'Visualizar 50', value: '50', isDisabled: true, icon: 'cog' },
-        { label: 'Visualizar 100', value: '100' },
-      ],
-    },
-  ],
-}
-
-export const GroupedWithLength = Template.bind({})
-GroupedWithLength.args = {
-  placeholder: 'Selecione um item',
-  showGroupLength: true,
-  options: [
-    {
-      label: 'Ajuda',
-      options: [
-        { label: 'Visualizar 15', value: '15' },
-        { label: 'Visualizar 50', value: '50', isDisabled: true, icon: 'cog' },
-        { label: 'Visualizar 100', value: '100' },
-      ],
-    },
-  ],
-}
-
-export const HelpText = Template.bind({})
-HelpText.args = {
-  placeholder: 'Selecione um item',
-  size: 'large',
-  helpText: 'Texto de ajuda para preencher o campo',
-}
-
-export const Label = Template.bind({})
-Label.args = {
-  placeholder: 'Selecione um item',
-  size: 'large',
-  label: 'Label',
-}
-
-export const WithError = Template.bind({})
-WithError.args = {
-  placeholder: 'Selecione um item',
-  size: 'large',
-  helpText: 'Texto de ajuda para preencher o campo',
-  label: 'Label',
-  errorMessage: 'Houve um erro',
-}
-
-export const DefaultValue = Template.bind({})
-DefaultValue.args = {
-  placeholder: 'Selecione um item',
-  defaultValue: dropdownOptions[0],
-}
-
-export const OnBlur = Template.bind({})
-OnBlur.args = {
-  placeholder: 'Selecione um item',
-  onBlur: (e) => {
-    console.log(e)
-  },
-}
-
-export const MaxMenuHeight = Template.bind({})
-MaxMenuHeight.args = {
-  placeholder: 'Selecione um item',
-  maxMenuHeight: 80,
-}
-
-export const WithComplement = Template.bind({})
-WithComplement.args = {
-  label: 'Label',
-  labelComplement: <Icon icon="infoCircle" size={4} block />,
-  required: true,
-}
-
-export const WithVariant = Template.bind({})
-WithVariant.args = {
-  label: 'Label',
-  variant: 'secondary',
-}