@loja-integrada/admin-components 0.19.4 → 1.0.0

package/src/Indicators/Alert/Alert.tsx

@@ -1,141 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Icon, IconProps } from '../../Icons'
-
-type alertTypesOptions = 'success' | 'warning' | 'danger' | 'info' | 'primary'
-
-const alertTypes: Record<
-  alertTypesOptions,
-  {
-    class: string
-    icon: IconProps['icon']
-    iconClass: string
-  }
-> = {
-  success: {
-    class: 'bg-success-light border-success',
-    icon: 'checkCircle',
-    iconClass: 'text-success',
-  },
-  warning: {
-    class: 'bg-warning-light border-warning',
-    icon: 'exclamationTriangle',
-    iconClass: 'text-warning',
-  },
-  danger: {
-    class: 'bg-danger-light border-danger',
-    icon: 'ban',
-    iconClass: 'text-danger',
-  },
-  info: {
-    class: 'bg-base-1 border-inverted-2',
-    icon: 'infoCircle',
-    iconClass: 'text-inverted-2',
-  },
-  primary: {
-    class: 'bg-primary-light border-primary',
-    icon: 'infoCircle',
-    iconClass: 'text-primary',
-  },
-}
-
-const AlertComponent = ({
-  type = 'info',
-  isOpen = true,
-  title,
-  subtitle,
-  actions,
-  showClose = false,
-  onClose,
-  hideIcon = false,
-  customIcon,
-}: AlertProps) => {
-  const [alertIsOpen, setAlertIsOpen] = useState(isOpen)
-  useEffect(() => {
-    setAlertIsOpen(isOpen)
-  }, [isOpen])
-
-  const handleOnClose = () => {
-    setAlertIsOpen(false)
-    onClose?.()
-  }
-
-  if (!alertIsOpen) return null
-  return (
-    <div
-      className={`alert border border-l-4 py-4 px-5 rounded w-full relative flex items-start sm:items-center ${alertTypes[type].class}`}
-    >
-      {!hideIcon && (
-        <div
-          className={`alert-icon hidden sm:block flex-shrink-0 mr-3 ${alertTypes[type].iconClass}`}
-        >
-          <Icon
-            icon={customIcon ? customIcon : alertTypes[type].icon}
-            size={6}
-          />
-        </div>
-      )}
-      <div className="flex-grow flex flex-col sm:flex-row items-start sm:items-center justify-between min-w-0">
-        <div className="flex flex-col justify-center min-w-0 break-words text-f6 tracking-4 leading-5 text-on-base">
-          <span className="alert-title font-semibold">{title}</span>
-          {subtitle && <span className="alert-subtitle mt-1">{subtitle}</span>}
-        </div>
-        {actions && (
-          <div className="alert-actions flex flex-shrink-0 items-center flex-row sm:flex-row-reverse sm:space-x-reverse space-x-3 mt-3 sm:mt-0 sm:ml-5">
-            {actions}
-          </div>
-        )}
-      </div>
-      {(showClose || onClose) && (
-        <div className={`alert-close flex-shrink-0 flex ml-5`}>
-          <button
-            className="p-2 -m-2 text-inverted-2 hover:text-inverted-1"
-            onClick={handleOnClose}
-          >
-            <Icon icon="close" size={4} block className="mt-px sm:mt-0" />
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export const Alert = React.memo(AlertComponent)
-
-export interface AlertProps {
-  /** Alert color
-   * @default info
-   * */
-  type?: keyof typeof alertTypes
-  /** Alert is visible
-   * @default true
-   */
-  isOpen?: boolean
-  /**
-   * Alert main text
-   */
-  title: string | React.ReactNode
-  /**
-   * Alert text below title
-   */
-  subtitle?: string | React.ReactNode
-  /**
-   * Function to close alert (also activate `showClose`)
-   */
-  onClose?: () => void
-  /** Show button close
-   * @default false
-   */
-  showClose?: boolean
-  /** Hide alert icon
-   * @default false
-   */
-  hideIcon?: boolean
-  /**
-   * Custom icon
-   */
-  customIcon?: IconProps['icon']
-  /**
-   * Action for the alert, like button and hiperlinks
-   * */
-  actions?: React.ReactNode
-}

package/src/Indicators/Alert/index.tsx

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

package/src/Indicators/Badge/Badge.spec.tsx

@@ -1,74 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./Badge.stories"
-import { Badge } from "./Badge"
-
-const { Default, Small, Expanded } = composeStories(stories)
-const badgeClass = '.badge'
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Badge tests'), () => {
-
-  it('Default', () => {
-    const text = 'Example text'
-    mount(<Default text={text} />)
-    cy.get(badgeClass).contains(text)
-  })
-
-  it('Small', () => {
-    mount(<Small />)
-    cy.get(badgeClass).should('have.class', 'px-1.5')
-  })
-
-  it('Size XSmall', () => {
-    mount(<Badge size="xsmall" text="Example text" />)
-    cy.get(badgeClass).should('have.class', 'text-f8')
-  })
-
-  it('Rounded Small', () => {
-    mount(<Badge rounded="small" text="Example text" />)
-    cy.get(badgeClass).should('have.class', 'rounded')
-  })
-
-  it('Rounded None', () => {
-    mount(<Badge rounded="none" text="Example text" />)
-    cy.get(badgeClass).should('have.class', 'rounded-none')
-  })
-
-  it('Rounded Full', () => {
-    mount(<Badge rounded="full" text="Example text" />)
-    cy.get(badgeClass).should('have.class', 'rounded-full')
-  })
-
-  it('Expanded', () => {
-    mount(<Expanded />)
-    cy.get(badgeClass).should('have.class', 'w-full')
-  })
-
-  it('Variants', () => {
-    mount(<Default type="neutral" />)
-    cy.get(badgeClass).should('have.class', 'bg-inverted-2 text-base-1')
-
-    mount(<Default type="neutralLight" />)
-    cy.get(badgeClass).should('have.class', 'bg-inverted-3 text-tertiary')
-
-    mount(<Default type="primary" />)
-    cy.get(badgeClass).should('have.class', 'bg-primary-dark text-base-1')
-
-    mount(<Default type="primaryLight" />)
-    cy.get(badgeClass).should('have.class', 'bg-primary-light text-primary-bold')
-
-    mount(<Default type="success" />)
-    cy.get(badgeClass).should('have.class', 'bg-success-dark text-base-1')
-
-    mount(<Default type="warning" />)
-    cy.get(badgeClass).should('have.class', 'bg-warning-dark text-base-1')
-
-    mount(<Default type="danger" />)
-    cy.get(badgeClass).should('have.class', 'bg-danger-dark text-base-1')
-
-    mount(<Default type="focus" />)
-    cy.get(badgeClass).should('have.class', 'bg-focus text-base-1')
-  })
-})

package/src/Indicators/Badge/Badge.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { withDesign } from 'storybook-addon-designs'
-
-import { Badge, BadgeProps } from './Badge'
-
-export default {
-  title: 'Indicators/Badge',
-  component: Badge,
-  decorators: [withDesign],
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/Z2WDD4SH8zwaJC2K5wbtMO/Sistema-Integrado?node-id=98%3A7360',
-    },
-  },
-  args: {
-    text: 'Texto',
-    type: 'neutral',
-    size: 'default',
-  },
-} as Meta
-
-const Template: Story<BadgeProps> = args => (
-  <div className="w-48 flex justify-center items-center">
-    <Badge {...args} />
-  </div>
-)
-
-export const Default = Template.bind({})
-
-export const Expanded = Template.bind({})
-Expanded.args = {
-  expanded: true,
-}
-
-export const Small = Template.bind({})
-Small.args = {
-  size: 'small',
-}

package/src/Indicators/Badge/Badge.tsx

@@ -1,75 +0,0 @@
-import React from 'react'
-
-const badgeTypes = {
-  neutral: 'bg-inverted-2 text-base-1',
-  neutralLight: 'bg-inverted-3 text-tertiary',
-  primary: 'bg-primary-dark text-base-1',
-  primaryLight: 'bg-primary-light text-primary-bold',
-  danger: 'bg-danger-dark text-base-1',
-  success: 'bg-success-dark text-base-1',
-  warning: 'bg-warning-dark text-base-1',
-  focus: 'bg-focus text-base-1',
-}
-
-const badgeRounded = {
-  full: 'rounded-full',
-  small: 'rounded',
-  none: 'rounded-none',
-}
-
-const badgeSizes = {
-  default: 'text-xs',
-  small: 'text-[0.70rem]',
-  xsmall: 'text-f8',
-}
-
-const badgeClasses = {
-  default: 'px-2 py-0.5',
-  small: 'px-1.5',
-  xsmall: 'px-0.5 py-px',
-}
-
-const BadgeComponent = ({
-  type = 'neutral',
-  text,
-  size = 'default',
-  expanded = false,
-  rounded = 'full',
-}: BadgeProps) => {
-  return (
-    <div
-      className={`badge items-center justify-center ${badgeRounded[rounded]} ${
-        badgeClasses[size]
-      } ${badgeTypes[type]} ${badgeSizes[size]} ${
-        expanded ? 'flex w-full' : 'inline-flex'
-      }`}
-    >
-      <span className="badgeText tracking-4 font-semibold">{text}</span>
-    </div>
-  )
-}
-
-export const Badge = React.memo(BadgeComponent)
-
-export interface BadgeProps {
-  /** Badge color
-   * @default neutral
-   * */
-  type?: keyof typeof badgeTypes
-  /**
-   * Badge text
-   * */
-  text?: string
-  /** Size of the badge
-   * @default default
-   * */
-  size?: keyof typeof badgeSizes
-  /**
-   * Enlarge width of the badge
-   * */
-  expanded?: boolean
-  /**
-   * Style of rounded corners
-   * */
-  rounded?: keyof typeof badgeRounded
-}

package/src/Indicators/Badge/index.tsx

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

package/src/Indicators/InformationBox/InformationBox.spec.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react'
-import { composeStories } from '@storybook/testing-react'
-import { mount } from '@cypress/react'
-import * as stories from './InformationBoxt.stories'
-
-const { Default } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle')
-describe(specTitle('InformationBox tests'), () => {
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('.InformationBox-title').last().contains('Informação')
-  })
-
-  it('Variants', () => {
-    mount(<Default type="success" />)
-    cy.get('.InformationBox-title').should('have.class', 'text-success-dark')
-    cy.get('.InformationBox-icon').should('have.class', 'icon-check')
-    cy.get('.InformationBox').should('have.class', 'bg-success-light')
-
-    mount(<Default type="warning" />)
-    cy.get('.InformationBox-title').should('have.class', 'text-warning-bold')
-    cy.get('.InformationBox-icon').should('have.class', 'icon-infoCircle')
-    cy.get('.InformationBox').should('have.class', 'bg-warning-light')
-
-    mount(<Default type="danger" />)
-    cy.get('.InformationBox-title').should('have.class', 'text-danger-dark')
-    cy.get('.InformationBox-icon').should('have.class', 'icon-exclamationTriangle')
-    cy.get('.InformationBox').should('have.class', 'bg-danger-light')
-
-    mount(<Default type="info" />)
-    cy.get('.InformationBox-title').should('have.class', 'text-focus-dark')
-    cy.get('.InformationBox-icon').should('have.class', 'icon-lightbulb')
-    cy.get('.InformationBox').should('have.class', 'bg-focus-light')
-  })
-})

package/src/Indicators/InformationBox/InformationBox.tsx

@@ -1,98 +0,0 @@
-import React from 'react'
-import { Icon, IconProps } from '../../Icons'
-
-type InformationBoxTypesOptions = 'success' | 'warning' | 'danger' | 'info'
-
-const InformationBoxTypes: Record<
-  InformationBoxTypesOptions,
-  {
-    title: string
-    titleClass: string
-    class: string
-    icon: IconProps['icon']
-    iconClass: string
-  }
-> = {
-  success: {
-    title: 'Sucesso!',
-    titleClass: 'text-success-dark',
-    class: 'bg-success-light dark:bg-success border-success',
-    icon: 'check',
-    iconClass: 'text-success-dark',
-  },
-  warning: {
-    title: 'Atenção!',
-    titleClass: 'text-warning-bold',
-    class: 'bg-warning-light border-warning',
-    icon: 'infoCircle',
-    iconClass: 'text-warning-dark',
-  },
-  danger: {
-    title: 'Cuidado!',
-    titleClass: 'text-danger-dark',
-    class: 'bg-danger-light border-danger',
-    icon: 'exclamationTriangle',
-    iconClass: 'text-danger-dark',
-  },
-  info: {
-    title: 'Informação',
-    titleClass: 'text-focus-dark',
-    class: 'bg-focus-light border-focus-dark',
-    icon: 'lightbulb',
-    iconClass: 'text-focus-dark',
-  },
-}
-
-const InformationBoxComponent = ({
-  type = 'info',
-  subtitle,
-  title,
-}: InformationBoxProps) => {
-  return (
-    <div
-      className={`InformationBox pl-4 pr-6 pt-5 pb-6 rounded w-full relative flex items-start mb-3 ${InformationBoxTypes[type].class}`}
-    >
-      <div
-        className={`w-10 h-10 flex justify-center items-center flex-shrink-0 rounded-full mr-3 bg-base-1`}
-      >
-        <Icon
-          icon={InformationBoxTypes[type].icon}
-          className={`InformationBox-icon ${InformationBoxTypes[type].iconClass}`}
-          size={4}
-        />
-      </div>
-
-      <div className="flex-grow flex flex-col sm:flex-row items-start justify-between min-w-0">
-        <div className="flex flex-col justify-center min-w-0 break-words tracking-4 leading-6 text-on-base">
-          <span
-            className={`InformationBox-title text-f5 font-semibold ${InformationBoxTypes[type].titleClass}`}
-          >
-            {title || InformationBoxTypes[type].title}
-          </span>
-          {subtitle && (
-            <span className="InformationBox-subtitle text-f6 font-regular mt-1">
-              {subtitle}
-            </span>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const InformationBox = React.memo(InformationBoxComponent)
-
-export interface InformationBoxProps {
-  /** InformationBox color
-   * @default info
-   * */
-  type?: keyof typeof InformationBoxTypes
-  /** Title default is related with `type`
-   * @default ''
-   */
-  title?: string | React.ReactNode
-  /**
-   * InformationBox text below title
-   */
-  subtitle?: string | React.ReactNode
-}

package/src/Indicators/InformationBox/InformationBoxt.stories.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { InformationBox, InformationBoxProps } from './InformationBox'
-
-export default {
-  title: 'Indicators/InformationBox',
-  component: InformationBox,
-  parameters: {
-    layout: 'padded',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/Z2WDD4SH8zwaJC2K5wbtMO/Sistema-Integrado?node-id=2406%3A20851',
-    },
-  },
-  args: {
-    title: '',
-    subtitle:
-      'Como criar um cadastro de produto incrível? No mundo virtual, o consumidor não pode pegar, sentir ou experimentar o produto. Por isso, a imagem que você utiliza faz toda a diferença na hora da venda.',
-  },
-} as Meta
-
-const Template: Story<InformationBoxProps> = (args) => (
-  <div className="max-w-4xl mx-auto">
-    <InformationBox {...args} />
-  </div>
-)
-
-export const Default = Template.bind({})

package/src/Indicators/InformationBox/index.tsx

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

package/src/Indicators/Status/Status.spec.tsx

@@ -1,47 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./Status.stories"
-
-const { Default } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Status tests'), () => {
-
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('.indicator-status *').last().contains('Aprovado')
-    cy.get('.indicator-status .rounded-full')
-  })
-
-  it('Variants', () => {
-    mount(<Default type="default" />)
-    cy.get('.indicator-status').find('.rounded-full').should('have.class', 'bg-inverted-2')
-
-    mount(<Default type="success" />)
-    cy.get('.indicator-status').find('.rounded-full').should('have.class', 'bg-success')
-
-    mount(<Default type="successDark" />)
-    cy.get('.indicator-status').find('.rounded-full').should('have.class', 'bg-success-dark')
-
-    mount(<Default type="warning" />)
-    cy.get('.indicator-status').find('.rounded-full').should('have.class', 'bg-warning')
-
-    mount(<Default type="danger" />)
-    cy.get('.indicator-status').find('.rounded-full').should('have.class', 'bg-danger')
-
-    mount(<Default type="dangerLight" />)
-    cy.get('.indicator-status').find('.rounded-full').should('have.class', 'bg-danger-light')
-  })
-
-  it('Inverted', () => {
-    mount(<Default inverted={true} />)
-    cy.get('.indicator-status *').first().contains('Aprovado')
-  })
-
-  it('Description', () => {
-    mount(<Default description={<strong>Aprovado</strong>} />)
-    cy.get('.indicator-status').find('strong').contains('Aprovado')
-  })
-
-})

package/src/Indicators/Status/Status.stories.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Status, StatusProps } from './Status'
-
-export default {
-  title: 'Indicators/Status',
-  component: Status,
-  args: {
-    description: 'Aprovado',
-  },
-} as Meta
-
-const Template: Story<StatusProps> = args => <Status {...args} />
-
-export const Default = Template.bind({})

package/src/Indicators/Status/Status.tsx

@@ -1,65 +0,0 @@
-import React from 'react'
-
-const statusTypes = {
-  default: 'bg-inverted-2',
-  success: 'bg-success',
-  successDark: 'bg-success-dark',
-  warning: 'bg-warning',
-  danger: 'bg-danger',
-  dangerLight: 'bg-danger-light',
-}
-
-const DescriptionComponent = ({
-  description,
-  inverted,
-}: Pick<StatusProps, 'description' | 'inverted'>) =>
-  (description && (
-    <span
-      className={`text-sm whitespace-normal break-words ${
-        inverted ? 'mr-2' : 'ml-2'
-      }`}
-    >
-      {description}
-    </span>
-  )) ||
-  null
-
-const StatusComponent = ({
-  type = 'default',
-  description,
-  inverted = false,
-}: StatusProps) => {
-  return (
-    <div className="indicator-status inline-block whitespace-nowrap min-w-0">
-      {inverted && (
-        <DescriptionComponent description={description} inverted={inverted} />
-      )}
-      <span
-        className={`inline-block rounded-full ${statusTypes[type]}`}
-        style={{
-          padding: '0.313rem', // 5px
-        }}
-      />
-      {!inverted && (
-        <DescriptionComponent description={description} inverted={inverted} />
-      )}
-    </div>
-  )
-}
-
-export const Status = React.memo(StatusComponent)
-
-export interface StatusProps {
-  /** Status color
-   * @default default
-   * */
-  type: keyof typeof statusTypes
-  /**
-   * Status additional text
-   * */
-  description?: React.ReactNode | string
-  /** Invert icon and text position
-   * @default false
-   * */
-  inverted?: boolean
-}

package/src/Indicators/Status/index.tsx

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

package/src/Indicators/Tag/Tag.spec.tsx

@@ -1,39 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./Tag.stories"
-
-const { Default, WithAction } = composeStories(stories)
-const tagClass = '.tag'
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Tag tests'), () => {
-
-  it('Default', () => {
-    const text = 'Example text'
-    mount(<Default content={text} />)
-    cy.get(tagClass).contains(text)
-  })
-
-  it('WithAction', () => {
-    mount(<WithAction />)
-    cy.get(tagClass).find('svg.icon-timesCircle').should('exist')
-  })
-
-  it('Variants', () => {
-    mount(<Default type="neutral" />)
-    cy.get(tagClass).should('have.class', 'bg-base-1')
-
-    mount(<Default type="primary" />)
-    cy.get(tagClass).should('have.class', 'bg-primary-light')
-
-    mount(<Default type="success" />)
-    cy.get(tagClass).should('have.class', 'bg-success-light')
-
-    mount(<Default type="warning" />)
-    cy.get(tagClass).should('have.class', 'bg-warning-light')
-
-    mount(<Default type="danger" />)
-    cy.get(tagClass).should('have.class', 'bg-danger-light')
-  })
-})