@loja-integrada/admin-components 0.19.4 → 1.0.0

package/src/Forms/RadioButton/RadioButton.spec.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react'
-import { composeStories } from '@storybook/testing-react'
-import { mount } from '@cypress/react'
-import * as stories from './RadioButton.stories'
-
-const { Default, Grouped, Disabled } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Toggle tests'), () => {
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('input').should('not.be.checked')
-    cy.get('.radioLabel').contains('label')
-  })
-
-  it('Grouped', () => {
-    mount(<Grouped />)
-    cy.get('input[type=radio]:checked').should('have.length', 1)
-    cy.get('.radioLabel').contains('label')
-  })
-
-  it('Disabled', () => {
-    mount(<Disabled />)
-    cy.get('input[type=radio]').should('be.checked')
-    cy.get('.checkmark').should('have.class', 'pointer-events-none')
-  })
-})

package/src/Forms/RadioButton/RadioButton.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { RadioButton, RadioButtonProps } from '.'
-
-export default {
-  title: 'Forms/RadioButton',
-  component: RadioButton,
-} as Meta
-
-const Template: Story<RadioButtonProps> = (args) => <RadioButton {...args} />
-
-const TemplateGrouped: Story<RadioButtonProps> = (args) => {
-  return (
-    <> 
-    <RadioButton {...args} id='1' value={1} name='form' defaultChecked/>
-    <RadioButton {...args} id='2' value={2} name='form'/>
-    <RadioButton {...args} id='3' value={3} name='form'/>
-  </>
-  )
-}
- 
-export const Default = Template.bind({})
-Default.args = {
-  label: 'label',
-  name: '',
-}
-
-export const Grouped= TemplateGrouped.bind({})
-Grouped.args = {
-  label: 'label',
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  disabled: true,
-  label: 'label',
-  name: '',
-  defaultChecked: true,
-}

package/src/Forms/RadioButton/RadioButton.tsx

@@ -1,80 +0,0 @@
-import React from 'react'
-
-const RadioButtonComponent = (
-  {
-    label,
-    id,
-    name,
-    value,
-    className = '',
-    onChange,
-    disabled = false,
-    ...props
-  }: RadioButtonProps,
-  ref: React.ForwardedRef<HTMLInputElement>
-): JSX.Element => {
-  const inputId = id || name
-  const toggleClasses = disabled
-    ? `pointer-events-none border-card-stroke text-on-base-2 font-semibold peer-checked:bg-base-3`
-    : `peer-checked:bg-primary cursor-pointer`
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    onChange && onChange(event)
-  }
-
-  return (
-    <div
-      className={`radioContainer relative inline-flex justify-center items-center text-f6 text-inverted-1 font-semibold mx-2`}
-    >
-      <label
-        className={`${className} relative inline-flex justify-center items-center border border-base-4 rounded-full w-4 h-4 mr-1 m-auto focus-within:border-focus focus-within:border-2
-        }`}
-      >
-        <input
-          ref={ref}
-          className={`absolute peer opacity-0 ${toggleClasses}`}
-          type="radio"
-          name={name}
-          value={value}
-          id={inputId}
-          onChange={handleChange}
-          {...props}
-          disabled={disabled}
-        />
-        <span
-          className={`checkmark rounded-full w-2 h-2 ${toggleClasses} peer-checked:inline-block`}
-        ></span>
-      </label>
-      <label htmlFor={inputId} className={`radioLabel ${toggleClasses}`}>
-        {label}
-      </label>
-    </div>
-  )
-}
-
-const RadioButtonWithForwardRef = React.forwardRef(RadioButtonComponent)
-export const RadioButton = React.memo(RadioButtonWithForwardRef)
-
-export interface RadioButtonProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  /**
-   * Custom class name
-   * */
-  className?: string
-  /**
-   * Custom id
-   * */
-  id?: string
-  /**
-   * Custom name
-   * */
-  name?: string
-  /**
-   * Custom value
-   * */
-  value?: string | number
-  /**
-   * Text label of the radio button
-   * */
-  label?: string | React.ReactNode
-}

package/src/Forms/RadioButton/index.tsx

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

package/src/Forms/Select/Select.spec.tsx

@@ -1,41 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./Select.stories"
-
-const { Default, Error, WithoutStyle, Disabled } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Select tests'), () => {
-
-  it('Default', () => {
-    mount(<Default />)
-    const val = '15'
-
-    cy.get('select option').should('have.length', 4)
-    cy.get('select').select(val).should('have.value', val)
-    cy.get('label.input-label').contains('Meu Select')
-    cy.get('div.input-help-text').contains('Texto de ajuda')
-  })
-
-  it('Required', () => {
-    mount(<Default required />)
-    cy.get('select').should('have.attr', 'required')
-  })
-
-  it('Error', () => {
-    mount(<Error />)
-    cy.get('select').should('have.class', 'border-danger')
-  })
-
-  it('WithoutStyle', () => {
-    mount(<WithoutStyle />)
-    cy.get('select').should('not.have.class', 'bg-base-1 border')
-  })
-
-  it('Disabled', () => {
-    mount(<Disabled />)
-    cy.get('select').should('have.class', '!bg-base-3 !pointer-events-none !text-on-base-2')
-  })
-
-})

package/src/Forms/Select/Select.stories.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Select, SelectProps } from '.'
-import { Icon } from '../../Icons'
-
-const selectOptions = [
-  { label: 'Visualizar 15', value: 15 },
-  { label: 'Visualizar 50', value: 50, disabled: true },
-  { label: 'Visualizar 100', value: 100 },
-]
-
-export default {
-  title: 'Forms/Select',
-  component: Select,
-  args: {
-    options: selectOptions,
-    onChange: (e: any) => {
-      alert(`Item: ${e.target.value}`)
-    },
-  },
-} as Meta
-
-const Template: Story<SelectProps> = (args) => <Select {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  id: 'exemplo',
-  label: 'Meu Select',
-  helpText: 'Texto de ajuda para escolher',
-  placeholder: 'Selecione um item',
-  defaultValue: 100,
-}
-
-export const Error = Template.bind({})
-Error.args = {
-  label: 'Meu Select',
-  helpText: 'Texto de ajuda para escolher',
-  errorMessage: 'Campo obrigatório',
-}
-
-export const WithoutStyle = Template.bind({})
-WithoutStyle.args = {
-  withoutStyle: true,
-}
-
-export const WithComplement = Template.bind({})
-WithComplement.args = {
-  label: 'Label',
-  labelComplement: <Icon icon="infoCircle" size={4} block />,
-  required: true,
-}
-
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  disabled: true,
-}

package/src/Forms/Select/Select.tsx

@@ -1,148 +0,0 @@
-import React from 'react'
-
-import { InputLabel, InputLabelProps } from '../InputLabel'
-import { InputHelpText, InputHelpTextProps } from '../InputHelpText'
-import {
-  inputContainerDisabledClasses,
-  errorBorderClasses,
-  defaultBorderClasses,
-  inputClasses,
-  variantClasses,
-} from '../commonStyles'
-const selectClasses = `bg-no-repeat pr-8 cursor-pointer`
-const withoutStyleClasses = `appearance-none bg-no-repeat mr-1 pr-4 cursor-pointer hover:text-inverted-1`
-
-export const SelectComponent = (
-  {
-    className = '',
-    label,
-    labelComplement,
-    helpText,
-    hasError = false,
-    errorMessage,
-    required = false,
-    id,
-    name,
-    variant = 'default',
-    disabled,
-    placeholder,
-    options = [],
-    withoutStyle = false,
-    style,
-    ...props
-  }: SelectProps,
-  ref: React.ForwardedRef<HTMLSelectElement>
-) => {
-  const selectId = id || name
-  const hasErrorState = hasError || !!errorMessage
-
-  let inputClass = ``
-  let backgroundPositionSize = '15px'
-  if (withoutStyle) {
-    inputClass += `${withoutStyleClasses}`
-    backgroundPositionSize = '5px'
-  } else {
-    inputClass = `${inputClasses} ${selectClasses} ${variantClasses[variant]}`
-    if (disabled) {
-      inputClass += ` ${defaultBorderClasses} ${inputContainerDisabledClasses} opacity-100`
-    } else if (hasErrorState) {
-      inputClass += ` ${errorBorderClasses}`
-    } else {
-      inputClass += ` ${defaultBorderClasses}`
-    }
-  }
-
-  const LabelComponent = (
-    <InputLabel
-      label={label}
-      required={required}
-      hasError={hasErrorState}
-      htmlFor={selectId}
-      className="mb-1"
-      labelComplement={labelComplement}
-    />
-  )
-
-  const HelpTextComponent = (
-    <InputHelpText
-      helpText={errorMessage || helpText}
-      hasError={hasErrorState}
-      className="mt-2"
-    />
-  )
-
-  return (
-    <div className={`form-group flex flex-col ${className}`}>
-      {LabelComponent}
-      <div className="flex w-full">
-        <select
-          ref={ref}
-          id={selectId}
-          name={name}
-          required={required}
-          disabled={disabled}
-          className={inputClass}
-          {...props}
-          style={{
-            backgroundImage:
-              'url(\'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 5" fill="%23607081"><path d="M7.11 0H.889a.667.667 0 00-.47 1.138l3.11 3.11a.661.661 0 00.943 0l3.11-3.11A.666.666 0 007.112 0z" /></svg>\')',
-            backgroundSize: '8px',
-            backgroundPosition: `calc(100% - ${backgroundPositionSize}) center`,
-            ...style,
-          }}
-        >
-          {placeholder && (
-            <option value="" disabled={required}>
-              {placeholder}
-            </option>
-          )}
-          {options?.map((option) => {
-            return (
-              <option
-                key={`${selectId}-${option.value}`}
-                value={`${option.value}`}
-                disabled={option.disabled}
-              >
-                {option.label}
-              </option>
-            )
-          })}
-        </select>
-      </div>
-      {HelpTextComponent}
-    </div>
-  )
-}
-
-const SelectWithFowardRef = React.forwardRef(SelectComponent)
-export const Select = React.memo(SelectWithFowardRef)
-
-export interface SelectProps
-  extends InputLabelProps,
-    InputHelpTextProps,
-    React.SelectHTMLAttributes<HTMLSelectElement> {
-  /**
-   * Custom class name
-   * */
-  className?: string
-  /** List of options to populate select
-   * @default []
-   */
-  options?: {
-    label: string | number
-    value?: string | number | boolean
-    disabled?: boolean
-  }[]
-  /** Input size
-   * @default default
-   * */
-  variant?: 'default' | 'small' | 'large' | 'xlarge'
-  /**
-   * Error message to display
-   * */
-  errorMessage?: string
-  /** Remove all styles, like borders and bgColor
-   * @default false
-   */
-  withoutStyle?: boolean
-}

package/src/Forms/Select/index.ts

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

package/src/Forms/Toggle/Toggle.spec.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react'
-import { composeStories } from '@storybook/testing-react'
-import { mount } from '@cypress/react'
-import * as stories from './Toggle.stories'
-
-const { Default, Disabled, DisabledChecked } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Toggle tests'), () => {
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('input').should('not.be.checked')
-    cy.get('.label').contains('Meu toggle')
-  })
-
-  it('Disabled', () => {
-    mount(<Disabled />)
-    cy.get('input').should('not.be.checked')
-    cy.get('.label').contains('Meu toggle')
-    cy.get('.relative').should('have.class', 'pointer-events-none')
-  })
-
-  it('Disabled Checked', () => {
-    mount(<DisabledChecked />)
-    cy.get('input').should('be.checked')
-    cy.get('.label').contains('Meu toggle')
-    cy.get('.relative').should('have.class', 'pointer-events-none')
-  })
-})

package/src/Forms/Toggle/Toggle.stories.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Toggle, ToggleProps } from '.'
-
-export default {
-  title: 'Forms/Toggle',
-  component: Toggle,
-} as Meta
-
-const Template: Story<ToggleProps> = (args) => <Toggle {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  label: 'Meu toggle',
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  label: 'Meu toggle',
-  disabled: true,
-}
-export const DisabledChecked = Template.bind({})
-DisabledChecked.args = {
-  label: 'Meu toggle',
-  disabled: true,
-  checked: true,
-}
-
-export const WithDefaultValue = Template.bind({})
-WithDefaultValue.args = {
-  label: 'Meu toggle',
-  checked: true,
-}
-
-export const WithOnChange = Template.bind({})
-WithOnChange.args = {
-  label: 'Meu toggle',
-  checked: true,
-  onChange: (e) => {
-    console.log(e.target.checked)
-  },
-}

package/src/Forms/Toggle/Toggle.tsx

@@ -1,85 +0,0 @@
-import React from 'react'
-
-const ToggleComponent = (
-  { label, id, name, onChange, checked, disabled, ...props }: ToggleProps,
-  ref: React.ForwardedRef<HTMLInputElement>
-) => {
-  const inputId = id || name
-  const [isChecked, setIsChecked] = React.useState(checked || false)
-
-  const toggleStatusText = disabled ? 'disabled' : 'enabled'
-  const toggleCheckText = isChecked ? 'checked' : 'unchecked'
-
-  React.useEffect(() => {
-    setIsChecked(!!checked)
-  }, [checked])
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (disabled) return
-    setIsChecked(event.target.checked)
-    onChange && onChange(event)
-  }
-
-  const toggleClasses = {
-    background: {
-      checked: {
-        enabled: 'bg-primary border-primary',
-        disabled: 'bg-base-3 border-card-stroke',
-      },
-      unchecked: {
-        enabled: 'bg-base-1 border-card-stroke',
-        disabled: 'bg-base-3 border-card-stroke',
-      },
-    },
-    circle: {
-      checked: {
-        enabled: 'translate-x-full ml-px bg-base-1',
-        disabled: 'translate-x-full ml-px bg-base-1',
-      },
-      unchecked: {
-        enabled: 'translate-x-0 bg-inverted-2',
-        disabled: 'translate-x-0 bg-base-1',
-      },
-    },
-  }
-
-  const toggleContainerDisabledClasses = `${
-    disabled ? 'pointer-events-none' : ''
-  } relative`
-
-  const toggleBackgroundClasses = `block border w-[53px] h-8 rounded-full ${toggleClasses.background[toggleCheckText][toggleStatusText]} transition`
-
-  const toggleCircleClasses = `transform  ${toggleClasses.circle[toggleCheckText][toggleStatusText]} absolute left-[6px] top-[6px] w-5 h-5 rounded-full transition`
-
-  const toggleLabelClasses = `ml-2 text-inverted-1 text-f6 tracking-4 label`
-
-  return (
-    <label
-      htmlFor={inputId}
-      className={`inline-flex items-center cursor-pointer`}
-    >
-      <div className={`${toggleContainerDisabledClasses}`}>
-        <input
-          ref={ref}
-          type="checkbox"
-          id={inputId}
-          className="sr-only"
-          checked={isChecked}
-          onChange={handleChange}
-          {...props}
-        />
-        <div className={toggleBackgroundClasses}></div>
-        <div className={toggleCircleClasses}></div>
-      </div>
-      <div className={toggleLabelClasses}>{label}</div>
-    </label>
-  )
-}
-
-const ToggleWithForwardRef = React.forwardRef(ToggleComponent)
-export const Toggle = React.memo(ToggleWithForwardRef)
-
-export interface ToggleProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: React.ReactNode | string
-}

package/src/Forms/Toggle/index.tsx

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

package/src/Forms/ToggleButton/ToggleButton.spec.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react'
-import { composeStories } from '@storybook/testing-react'
-import { mount } from '@cypress/react'
-import * as stories from './ToggleButton.stories'
-
-const { WithIcon, WithText, Disabled} = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Toggle Button tests'), () => {
-  it('With Icon', () => {
-    mount(<WithIcon />)
-    cy.get('input[type=radio]:checked').should('have.length', 1)
-    cy.get('ul').children().should('have.lengthOf.above', 0)
-    cy.get('svg').children().should('have.lengthOf.above', 0)
-  })
-
-  it('With Text', () => {
-    mount(<WithText />)
-    cy.get('input[type=radio]:checked').should('have.length', 1)
-    cy.get('ul').children().should('have.lengthOf.above', 0)
-    cy.get('.checkmark').children().should('have.lengthOf.above', 0).contains('span',`Text`)
-  })
-
-  it('Disabled', () => {
-    mount(<Disabled />)
-    cy.get('input[type=radio]:checked').should('have.length', 1)
-    cy.get('.checkmark').should('have.class', 'pointer-events-none')
-  })
-})

package/src/Forms/ToggleButton/ToggleButton.stories.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { Icon } from '../../Icons/Icon'
-import { ToggleButton, ToggleButtonProps } from '.'
-
-export default {
-  title: 'Forms/ToggleButton',
-  component: ToggleButton,
-} as Meta
-
-const Template: Story<ToggleButtonProps> = (args) => <ToggleButton {...args} />
-
-export const WithIcon = Template.bind({})
-WithIcon.args = {
-  disabled: false,
-  children: [
-    <Icon icon='desktop' key={1} />,
-    <Icon icon='mobile' key={2}/>,
-  ]
-}
-
-export const WithText = Template.bind({})
-WithText.args = {
-  disabled: false,
-  children: [
-    <span key={1}>With Text</span>,
-    <span key={2}>With Text</span>,
-    <span key={3}>With Text</span>,
-  ]
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  disabled: true,
-  children: [
-    <span key={1}>Disabled</span>,
-    <span key={2}>Disabled</span>,
-  ]
-}
-
-export const WithOnChange = Template.bind({})
-WithOnChange.args = {
-  disabled: false,
-  children: [
-    <Icon icon='desktop' key={1} />,
-    <Icon icon='mobile' key={2}/>,
-  ],
-  onChange: (e) => {
-    console.log(e.target.name)
-  },
-}