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

package/src/Indicators/Tag/Tag.stories.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { withDesign } from 'storybook-addon-designs'
-import { Icon } from '../../Icons'
-
-import { Tag, TagProps } from './Tag'
-
-export default {
-  title: 'Indicators/Tag',
-  component: Tag,
-  decorators: [withDesign],
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/Z2WDD4SH8zwaJC2K5wbtMO/Sistema-Integrado?node-id=1496%3A13727',
-    },
-  },
-  args: {
-    content: 'De 10/02/2022 a 22/02/2022',
-    type: 'primary',
-  },
-} as Meta
-
-const Template: Story<TagProps> = args => <Tag {...args} />
-
-export const Default = Template.bind({})
-
-export const WithAction = Template.bind({})
-WithAction.args = {
-  action: (
-    <Icon icon="timesCircle" size={4} block />
-  ),
-}

package/src/Indicators/Tag/Tag.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-
-const TagTypes = {
-  neutral: 'bg-base-1 border-inverted-2',
-  primary: 'bg-primary-light border-primary',
-  danger: 'bg-danger-light border-danger',
-  success: 'bg-success-light border-success',
-  warning: 'bg-warning-light border-warning',
-}
-
-const TagComponent = ({
-  type = 'neutral',
-  content,
-  fullWidth = false,
-  className = '',
-  action,
-}: TagProps) => {
-  return (
-    <div
-      className={`tag ${
-        fullWidth ? 'flex' : 'inline-flex'
-      } items-center justify-between border rounded px-4 py-2 tracking-4 leading-6 text-f6 text-primary-bold ${
-        TagTypes[type]
-      } ${className}`}
-    >
-      <div className="min-w-0 break-words -my-px">{content}</div>
-      {action && <div className="-my-px ml-3">{action}</div>}
-    </div>
-  )
-}
-
-export const Tag = React.memo(TagComponent)
-
-export interface TagProps {
-  /** Tag color
-   * @default neutral
-   * */
-  type?: keyof typeof TagTypes
-  /**
-   * Tag content
-   * */
-  content: string | React.ReactNode
-  /**
-   * Enlarge width of the Tag
-   * */
-  fullWidth?: boolean
-  /** Adittional classes for Tag
-   * @default ''
-   * */
-  className?: string
-  /**
-   * Action for the tag, like an button or icon
-   * */
-  action: React.ReactNode
-}

package/src/Indicators/Tag/index.tsx

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

package/src/Indicators/Toast/Toast.spec.tsx

@@ -1,18 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./Toast.stories"
-
-const { Default } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Toast tests'), () => {
-
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('.Toastify')
-    cy.get('button').click()
-    cy.get('.Toastify').contains('Aprovado')
-  })
-
-})

package/src/Indicators/Toast/Toast.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Toast } from './Toast'
-
-import { Button } from '../../Components/Button'
-
-export default {
-  title: 'Indicators/Toast',
-  component: Toast.Container,
-  args: {
-    title: 'Aprovado',
-    type: 'success'
-  },
-  argTypes: {
-    type: {
-      options: ['info', 'success', 'warning', 'error', 'default'],
-      control: { type: 'radio' }
-    }
-  }
-} as Meta
-
-const Template: Story<any> = ({ title, ...args }) => (
-  <>
-    <Toast.Container />
-    <Button onClick={() => Toast.notify(title, { ...args })}>
-      Show toast
-    </Button>
-  </>
-)
-
-export const Default = Template.bind({})

package/src/Indicators/Toast/Toast.tsx

@@ -1,76 +0,0 @@
-import React, { useEffect } from 'react'
-import {
-  ToastContainer,
-  toast as showToast,
-  ToastContent,
-  ToastOptions,
-} from 'react-toastify'
-import { injectStyle } from 'react-toastify/dist/inject-style'
-import { Icon } from '../../Icons'
-
-const contextClass = {
-  success: 'bg-primary-light border-primary-dark',
-  error: 'bg-danger-light border-danger-dark',
-  info: 'bg-secondary-light border-secondary',
-  warning: 'bg-warning-light border-warning-dark',
-  default: '',
-  dark: '',
-}
-
-const progressClassName = {
-  success: '!bg-primary-dark',
-  error: '!bg-danger-dark',
-  info: '!bg-secondary-dark',
-  warning: '!bg-warning-dark',
-  default: '',
-  dark: '',
-}
-
-const Container = () => {
-  useEffect(() => {
-    injectStyle()
-  }, [])
-
-  return (
-    <ToastContainer
-      toastClassName={(props) =>
-        `mb-3 border flex items-top justify-between p-3 pb-4 pr-4 relative rounded shadow-md ${
-          contextClass[props?.type || 'info']
-        }`
-      }
-      bodyClassName={() => `max-w-[95%] text-sm text-on-base break-words`}
-      progressClassName={(props) =>
-        `${props?.defaultClassName} !h-1 ${
-          progressClassName[props?.type || 'info']
-        }`
-      }
-      closeButton={({ closeToast }) => (
-        <div
-          className="-mt-3 -mr-2 cursor-pointer text-on-base hover:text-on-base-2"
-          onClick={closeToast}
-        >
-          <Icon icon="close" size={3} />
-        </div>
-      )}
-      position="top-right"
-    />
-  )
-}
-
-const notify = (content: ToastContent, options?: ToastOptions) => {
-  const type = options?.type || 'info'
-  const autoClose = !(typeof options?.autoClose === 'boolean')
-    ? options?.autoClose
-    : options?.autoClose && 5000
-
-  showToast(content, {
-    ...options,
-    type: type,
-    autoClose: autoClose,
-  })
-}
-
-export const Toast = {
-  Container,
-  notify,
-}

package/src/Indicators/Toast/index.tsx

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

package/src/Indicators/Tooltip/Tooltip.spec.tsx

@@ -1,18 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./Tooltip.stories"
-
-const { Default } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Tooltip tests'), () => {
-
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('[data-tippy-root]').should('not.exist');
-    cy.get('a').trigger('mouseenter')
-    cy.get('[data-tippy-root]').contains('I am a tooltip!')
-  })
-
-})

package/src/Indicators/Tooltip/Tooltip.stories.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Tooltip, TooltipProps } from './Tooltip'
-
-import { Icon } from '../../Icons'
-
-export default {
-  title: 'Indicators/Tooltip',
-  component: Tooltip,
-  args: {
-    appendTo: 'parent',
-    content: 'I am a tooltip!',
-    hideOnClick: false,
-    trigger: 'mouseenter',
-    touch: 'hold',
-    duration: 150,
-    placement: 'top',
-    interactive: false,
-  },
-} as Meta
-
-const Template: Story<TooltipProps> = args => (
-  <div className="absolute bg-base-2 inset-0 flex items-center justify-center">
-    <Tooltip {...args}>
-      <a href="#">
-        <Icon icon="eye" />
-      </a>
-    </Tooltip>
-  </div>
-)
-
-export const Default = Template.bind({})

package/src/Indicators/Tooltip/Tooltip.tsx

@@ -1,80 +0,0 @@
-import React from 'react'
-import Tippy, { TippyProps } from '@tippyjs/react'
-import './style.scss'
-
-const TooltipComponent = (props: TooltipProps) => {
-  const [mounted, setMounted] = React.useState(false)
-
-  const lazyPlugin = {
-    fn: () => ({
-      onMount: () => setMounted(true),
-      onHidden: () => setMounted(false),
-    }),
-  }
-
-  const computedProps = { ...props }
-
-  computedProps.plugins = [lazyPlugin, ...(props.plugins || [])]
-
-  if (props.render) {
-    const render = props.render
-    computedProps.render = (...args) => (mounted ? render(...args) : '')
-  } else {
-    computedProps.content = mounted ? props.content : ''
-  }
-
-  if (typeof window === 'undefined') {
-    return <>{props.children}</>
-  }
-
-  return (
-    <Tippy
-      {...computedProps}
-      appendTo={props?.appendTo || 'parent'}
-      hideOnClick={props?.hideOnClick || false}
-      trigger={props?.trigger || 'mouseenter'}
-      touch={props?.touch || ['hold', 400]}
-      duration={props?.duration || 150}
-      placement={window?.innerWidth < 1024 ? 'top' : props?.placement || 'top'}
-      interactive={props?.interactive || false}
-    />
-  )
-}
-
-export const Tooltip = React.memo(TooltipComponent)
-
-export interface TooltipProps extends TippyProps {
-  /** Tooltip append
-   * @default 'parent'
-   * */
-  appendTo?: TippyProps['appendTo']
-  /** Tooltip hide on click
-   * @default false
-   * */
-  hideOnClick?: TippyProps['hideOnClick']
-  /** Tooltip trigger
-   * @default 'mouseenter'
-   * */
-  trigger?: TippyProps['trigger']
-  /** Tooltip action on touch
-   * @default ['hold', 400]
-   * */
-  touch?: TippyProps['touch']
-  /** Tooltip duration
-   * @default 150
-   * */
-  duration?: TippyProps['duration']
-  /** Tooltip position
-   * @default 'top'
-   * */
-  placement?: TippyProps['placement']
-  /** Tooltip can be hovered over and clicked inside
-   * @default false
-   * */
-  interactive?: TippyProps['interactive']
-  /** Tooltip theme
-   * @deprecated Not implemented
-   * @default dark
-   * */
-  theme?: 'light' | 'dark'
-}

package/src/Indicators/Tooltip/index.tsx

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

package/src/Indicators/Tooltip/style.scss

@@ -1,72 +0,0 @@
-.tippy-box {
-  @apply relative bg-inverted-1 text-base-1 rounded text-f7 tracking-4 leading-4 outline-0 transition-all;
-
-  &[data-animation='fade'][data-state='hidden'] {
-    @apply opacity-0;
-  }
-
-  [data-tippy-root] {
-    max-width: calc(100vw - 10px);
-  }
-
-  &[data-placement^='top']>.tippy-arrow {
-    @apply bottom-0;
-  }
-
-  &[data-placement^='top']>.tippy-arrow:before {
-    @apply -bottom-2 left-0;
-    border-width: 8px 8px 0;
-    border-top-color: initial;
-    transform-origin: center top;
-  }
-
-  &[data-placement^='bottom']>.tippy-arrow {
-    @apply top-0;
-  }
-
-  &[data-placement^='bottom']>.tippy-arrow:before {
-    @apply -top-2 left-0;
-    border-width: 0 8px 8px;
-    border-bottom-color: initial;
-    transform-origin: center bottom;
-  }
-
-  &[data-placement^='left']>.tippy-arrow {
-    @apply right-0;
-  }
-
-  &[data-placement^='left']>.tippy-arrow:before {
-    @apply -right-2;
-    border-width: 8px 0 8px 8px;
-    border-left-color: initial;
-    transform-origin: center left;
-  }
-
-  &[data-placement^='right']>.tippy-arrow {
-    @apply left-0;
-  }
-
-  &[data-placement^='right']>.tippy-arrow:before {
-    @apply -left-2;
-    border-width: 8px 8px 8px 0;
-    border-right-color: initial;
-    transform-origin: center right;
-  }
-
-  &[data-inertia][data-state='visible'] {
-    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
-  }
-
-  .tippy-arrow {
-    @apply text-inverted-1 w-4 h-4;
-  }
-
-  .tippy-arrow:before {
-    @apply absolute border-transparent border-solid;
-    content: '';
-  }
-
-  .tippy-content {
-    @apply relative py-3 px-2 z-1;
-  }
-}

package/src/Indicators/index.ts

@@ -1,7 +0,0 @@
-export * from './Alert'
-export * from './Status'
-export * from './Tag'
-export * from './Toast'
-export * from './Badge'
-export * from './Tooltip'
-export * from './InformationBox'

package/src/Layout/ActionBar/ActionBar.spec.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { composeStories } from '@storybook/testing-react'
-import { mount } from '@cypress/react'
-import * as stories from './ActionBar.stories'
-
-const { Default, OnlyMobile } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('ActionBar tests'), () => {
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('.fixed').should('not.have.class', 'lg:hidden')
-  })
-
-  it('OnlyMobile', () => {
-    mount(<OnlyMobile />)
-    cy.get('.fixed').should('have.class', 'lg:hidden')
-  })
-})
-

package/src/Layout/ActionBar/ActionBar.stories.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { ActionBar, ActionBarProps } from '.'
-import { Button } from '../../Components/Button'
-
-export default {
-  component: ActionBar,
-  title: 'Layout/ActionBar',
-} as Meta
-
-const Template: Story<ActionBarProps> = (args) => <ActionBar {...args} />
-
-export const Default = Template.bind({})
-Default.args = {
-  children: [
-    <Button variant="tertiary" icon="timesCircle" onClick={() => {}}>
-      Cancelar
-    </Button>,
-    <Button variant="primary" icon="checkCircle" onClick={() => {}}>
-      <span className="hidden lg:block">Criar novo registro</span>
-      <span className="block lg:hidden">Criar</span>
-    </Button>,
-  ],
-}
-
-export const OnlyMobile = Template.bind({})
-OnlyMobile.args = {
-  onlyMobile: true,
-  children: [
-    <Button icon="trash" onClick={() => {}}>
-      Remover
-    </Button>,
-    <Button icon="checkCircle" onClick={() => {}}>
-      Ativar
-    </Button>,
-    <></>,
-    <Button icon="ban" onClick={() => {}}>
-      Inativar
-    </Button>,
-  ],
-}

package/src/Layout/ActionBar/ActionBar.tsx

@@ -1,89 +0,0 @@
-import React, { useEffect } from 'react'
-import { Button } from '../../Components/Button'
-import { Icon } from '../../Icons'
-
-import { CONTAINER_MAX_SIZE } from '../constants'
-
-const ActionBarComponent = ({ onlyMobile, children }: ActionBarProps) => {
-  const [containerExpanded, setContainerExpanded] = React.useState(true)
-  useEffect(() => {
-    const botbar = window.parent.document.querySelector<HTMLElement>('.botbar')
-    const container =
-      window.document.querySelector<HTMLElement>('.page-container')
-
-    if (botbar) botbar.style.display = 'none'
-    if (container) {
-      container.classList.remove('lg:mb-10', 'lg:pb-0')
-      setContainerExpanded(!!container.dataset.expanded)
-    }
-
-    return () => {
-      if (botbar) botbar.style.display = ''
-      if (container) container.classList.add('lg:mb-10', 'lg:pb-0')
-    }
-  }, [])
-
-  return (
-    <div
-      className={
-        'action-bar fixed inset-x-0 bottom-0 h-12 lg:h-auto pb-0-safe bg-inverted-1 lg:bg-base-1 z-50 shadow' +
-        (onlyMobile ? ' lg:hidden' : '')
-      }
-    >
-      <div
-        className={`${
-          containerExpanded
-            ? CONTAINER_MAX_SIZE.expanded
-            : CONTAINER_MAX_SIZE.default
-        } flex items-center justify-center lg:justify-end w-full h-full mx-auto px-8 lg:px-0`}
-      >
-        {!onlyMobile && (
-          <div className="hidden lg:grid grid-flow-col gap-x-5 my-2.5 mr-8">
-            {React.Children.map(children, ({ props }) => {
-              const { ...childrenProps } = props
-
-              delete childrenProps?.icon
-
-              return <Button {...childrenProps} />
-            })}
-          </div>
-        )}
-        <div className="lg:hidden">
-          {React.Children.map(children, ({ props }) => {
-            if (!props.children) return
-            return (
-              <button
-                className={
-                  'px-4 py-1 text-base-1' +
-                  (props?.loading ? ' pointer-events-none' : '')
-                }
-                onClick={props?.onClick}
-                type={props?.type || 'button'}
-              >
-                {props?.loading ? (
-                  <Icon icon="loading" className="p-px" />
-                ) : (
-                  props?.icon && <Icon icon={props?.icon} className="p-px" />
-                )}
-                <span className="block text-f8">{props.children}</span>
-              </button>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const ActionBar = React.memo(ActionBarComponent)
-
-export interface ActionBarProps {
-  /** Show component only on Mobile
-   * @default false
-   */
-  onlyMobile?: boolean
-  /**
-   * React children
-   */
-  children: React.ReactElement | React.ReactElement[]
-}

package/src/Layout/ActionBar/index.tsx

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

package/src/Layout/Box/Box.spec.tsx

@@ -1,73 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./Box.stories"
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-
-const { Default, WithAction, WithTabs, WithToggle, OnlyTabs } = composeStories(stories)
-
-describe(specTitle('Box tests'), () => {
-
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('.box')
-      .should('have.length', 1)
-      .within(() => {
-        cy.get('.box-header .box-header-title').should('exist')
-        cy.get('.box-header h3').contains('Box Title')
-        cy.get('.box-header h4').contains('Box SubTitle')
-        cy.get('.box-header .indicator-status').contains('Some status')
-        cy.get('.tabs button').should('have.length', 3)
-        cy.get('.box-content').contains('Box Content')
-        cy.get('.box-content').should('have.class', 'lg:p-10')
-      })
-  })
-
-  it('Small', () => {
-    mount(<Default variant="small" />)
-    cy.get('.box .box-content').should('not.have.class', 'lg:p-10')
-  })
-
-  it('WithAction', () => {
-    mount(<WithAction />)
-    cy.get('.box .box-header .indicator-status')
-      .should('have.length', 1)
-      .contains('Some status')
-      .get('.rounded-full').should('have.class', 'bg-success')
-    cy.get('.box .tabs').should('not.exist')
-  })
-
-  it('WithToggle', () => {
-    mount(<WithToggle />)
-    cy.get('.box .box-header .box-toggle')
-      .should('have.length', 1)
-      .parents('.box-header').trigger('click')
-    cy.get('.box')
-      .should('have.attr', 'data-opened', 'false')
-      .get('.box-header')
-      .trigger('click')
-    cy.get('.box')
-      .should('have.attr', 'data-opened', 'true')
-    cy.get('.box .tabs').should('not.exist')
-  })
-
-  it('WithTabs', () => {
-    mount(<WithTabs />)
-    cy.get('.box .tabs')
-      .should('have.length', 1)
-      .get('button')
-      .should('have.length', 3)
-    cy.get('.box .box-header .indicator-status').should('not.exist')
-  })
-
-  it('OnlyTabs', () => {
-    mount(<OnlyTabs />)
-    cy.get('.box .tabs')
-      .should('have.length', 1)
-      .get('button')
-      .should('have.length', 3)
-    cy.get('.box .box-header .box-header-title').should('not.exist')
-    cy.get('.box .box-header .indicator-status').should('not.exist')
-  })
-
-})