@loja-integrada/admin-components 0.19.4 → 1.0.0

package/src/Components/Modal/Modal.tsx

@@ -1,141 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import ReactModal from 'react-modal'
-
-import { Icon } from '../../Icons'
-
-const sizeClasses = {
-  small: 'sm:max-w-[600px]',
-  default: 'sm:max-w-4xl',
-  large: 'sm:max-w-6xl',
-}
-
-const ModalComponent = ({
-  className = '',
-  isOpen = false,
-  preventClose = false,
-  size = 'default',
-  headerTitle,
-  headerClose = 'Fechar',
-  footerActions,
-  onClose,
-  closeTimeout = 200,
-  parentSelector,
-  children,
-}: ModalProps) => {
-  const [modalIsOpen, setModalIsOpen] = useState(false)
-  const [modalPreventClose, setModalPreventClose] = useState(false)
-
-  useEffect(() => {
-    setModalIsOpen(isOpen)
-    setModalPreventClose(preventClose)
-  }, [isOpen, preventClose])
-
-  const handleRequestCloseFunc = () => {
-    setModalIsOpen(false)
-  }
-  const handleAfterCloseFunc = () => {
-    onClose && onClose()
-  }
-
-  return (
-    <ReactModal
-      isOpen={modalIsOpen}
-      onAfterClose={handleAfterCloseFunc}
-      onRequestClose={handleRequestCloseFunc}
-      closeTimeoutMS={closeTimeout}
-      ariaHideApp={false}
-      shouldCloseOnOverlayClick={!modalPreventClose}
-      shouldCloseOnEsc={!modalPreventClose}
-      overlayClassName={`justify-center items-end sm:items-center flex overflow-hidden w-screen h-full fixed inset-0 z-50 outline-none bg-black bg-opacity-60 pt-16 sm:p-3 focus:outline-none transition ${
-        modalIsOpen ? 'opacity-100' : 'opacity-0'
-      }`}
-      className={`relative max-h-full p-8 sm:p-10 rounded-t-xl sm:rounded-xl shadow-lg flex flex-col w-full bg-base-1 outline-none focus:outline-none border border-card-stroke break-words ${sizeClasses[size]} ${className}`}
-      bodyOpenClassName={'ReactModal__Body--open overflow-hidden'}
-      testId={'modal-component'}
-      parentSelector={() => (parentSelector ? parentSelector : document.body)}
-      contentElement={(props, children) => (
-        <div {...props}>
-          <div className="ReactModal__header w-full flex justify-between items-start">
-            <span
-              className={`min-w-0 text-inverted-2 text-xs font-semibold uppercase break-words ${
-                headerTitle ? 'pb-3' : ''
-              }`}
-            >
-              {headerTitle}
-            </span>
-            <button
-              type="button"
-              id="btnCloseModal"
-              className={`${
-                preventClose ? 'hidden' : 'flex'
-              } items-center p-2 pb-1 -mr-2 -mt-3 text-sm font-semibold text-inverted-2 hover:text-inverted-1`}
-              onClick={handleRequestCloseFunc}
-            >
-              {headerClose !== false && (
-                <span className="pr-2">{headerClose}</span>
-              )}
-              <Icon icon="close" size={4} />
-            </button>
-          </div>
-          <div className="ReactModal__innerContent flex-auto overflow-x-auto min-w-0 break-words overscroll-none -mx-8 sm:-mx-10 px-8 sm:px-10">
-            {children}
-          </div>
-          {footerActions && (
-            <div className="ReactModal__footer pt-5">{footerActions}</div>
-          )}
-        </div>
-      )}
-    >
-      {children}
-    </ReactModal>
-  )
-}
-
-export const Modal = React.memo(ModalComponent)
-
-export interface ModalProps {
-  /**
-   * Custom class name
-   * */
-  className?: string
-  /** Modal is open
-   * @default false
-   */
-  isOpen?: boolean
-  /** Prevent modal close
-   * @default false
-   */
-  preventClose?: boolean
-  /** Modal width
-   * @default 'default'
-   * */
-  size?: 'default' | 'large' | 'small'
-  /**
-   * Modal title
-   * */
-  headerTitle?: string | React.ReactNode
-  /** Close text at header
-   * @default 'Fechar'
-   * */
-  headerClose?: string | false
-  /**
-   * Call when modal is closed
-   * */
-  onClose?: Function
-  /**
-   * Number indicating the milliseconds to wait before closing the modal
-   * */
-  closeTimeout?: number
-  /**
-   * React children
-   */
-  children?: React.ReactNode
-  /**
-   * React children
-   */
-  footerActions?: React.ReactNode
-  /** The parent element that the modal will be attached to
-   * @default 'document.body'
-   */
-  parentSelector?: HTMLElement | null
-}

package/src/Components/Modal/index.tsx

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

package/src/Components/SidebarFixed/SidebarFixed.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 "./SidebarFixed.stories"
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-
-const { Default } = composeStories(stories)
-
-describe(specTitle('SidebarFixed tests'), () => {
-
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('.sidebar-fixed')
-      .should('exist')
-      .should('have.class', 'opacity-100')
-      .find('.sidebar-fixed-help')
-        .should('have.attr', 'href').and('include', 'https://ajuda.lojaintegrada.com.br/')
-
-    cy.get('.sidebar-fixed .sidebar-fixed-content')
-      .find('input')
-      .should('exist')
-
-    cy.get('.sidebar-fixed .sidebar-fixed-footer')
-      .find('button')
-      .should('exist')
-
-    let alerted = ''
-    cy.on('window:alert', msg => alerted = msg)
-    cy.get('.sidebar-fixed .sidebar-fixed-close')
-      .click()
-      .then(() => expect(alerted).to.match(/Closed/))
-    cy.get('.sidebar-fixed')
-      .should('have.class', 'opacity-0')
-  })
-
-})

package/src/Components/SidebarFixed/SidebarFixed.stories.tsx

@@ -1,39 +0,0 @@
-import React from 'react'
-// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/react/types-6-0'
-import { Input } from '../../Forms/Input'
-import { Select } from '../../Forms/Select'
-import { Button } from '../Button'
-
-import { SidebarFixed, SidebarFixedProps } from '.'
-
-export default {
-  title: 'Components/SidebarFixed',
-  component: SidebarFixed,
-  args: {
-    children: (
-      <div className="flex flex-col gap-5">
-        <Input label="Filtro 1" />
-        <Input label="Filtro 2" />
-        <Select label="Filtro 3" options={[]} />
-        <Input label="Filtro 4" />
-      </div>
-    ),
-    isOpen: true,
-    helpLink: 'https://ajuda.lojaintegrada.com.br/',
-    footerActions: (
-      <Button fullWidth>Aplicar filtros</Button>
-    ),
-    onClose: () => alert('Closed')
-  }
-} as Meta
-
-const Template: Story<SidebarFixedProps> = args => (
-  <div>
-    <SidebarFixed {...args} />
-    Nothing here to see
-  </div>
-)
-
-export const Default = Template.bind({})
-Default.args = {}

package/src/Components/SidebarFixed/SidebarFixed.tsx

@@ -1,119 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Icon } from '../../Icons'
-
-const backgroundShadowEffect = [
-  '[background:linear-gradient(theme(colors.base-1/100)_33%,rgba(255,255,255,0)),linear-gradient(rgba(255,255,255,0),theme(colors.base-1/100)_66%)_0_100%,radial-gradient(farthest-side_at_50%_0,rgba(156,156,156,0.5),rgba(0,0,0,0)),radial-gradient(farthest-side_at_50%_100%,_rgba(156,156,156,0.5),rgba(0,0,0,0))_0_100%]',
-  '[background-size:100%_15px,100%_15px,100%_5px,100%_5px]',
-  '[background-attachment:local,local,scroll,scroll]',
-  '[background-repeat:no-repeat]',
-  '[background-color:theme(colors.base-1/100)]',
-  '[&_.form-group_.bg-base-1]:bg-transparent',
-]
-
-export const SidebarFixedComponent: React.FC<SidebarFixedProps> = ({
-  children,
-  footerActions,
-  isOpen = false,
-  onClose,
-  title,
-  helpLink,
-}) => {
-  const [sidebarIsOpen, setSidebarIsOpen] = useState(false)
-
-  useEffect(() => {
-    setSidebarIsOpen(isOpen)
-  }, [isOpen])
-
-  const handleRequestCloseFunc = () => {
-    setSidebarIsOpen(false)
-    onClose?.()
-  }
-
-  return (
-    <div
-      className={`sidebar-fixed fixed z-40 lg:z-20 right-0 bottom-0 w-full h-full transition-all overflow-x-hidden ${
-        sidebarIsOpen
-          ? 'pointer-events-auto opacity-100'
-          : 'opacity-0 pointer-events-none'
-      }`}
-    >
-      <div
-        className="sidebar-fixed-backdrop fixed inset-0 h-full w-full bg-black-alpha -z-1"
-        onClick={handleRequestCloseFunc}
-      />
-      <div
-        className={`sidebar-fixed-inner mt-10 sm:mt-0 top-0 bottom-0 right-0 absolute flex flex-col justify-between bg-base-1 transform transition-transform shadow h-auto w-full sm:max-w-[410px] sm:ml-16 rounded-t-lg sm:rounded-none ${
-          sidebarIsOpen ? 'translate-x-0' : 'translate-x-10'
-        }`}
-      >
-        <div className="sidebar-fixed-header flex justify-between items-center p-3 lg:px-5 text-inverted-2">
-          {title && (
-            <div className="sidebar-fixed-title px-2 py-2 sm:py-5 text-f5 sm:text-f4 font-semibold text-inverted-1">
-              {title}
-            </div>
-          )}
-          <div className={`flex justify-between${title ? '' : ' flex-1'}`}>
-            <button
-              className="sidebar-fixed-close p-2 hover:text-primary transition-colors"
-              onClick={handleRequestCloseFunc}
-            >
-              <Icon icon="close" block size={4} />
-            </button>
-            {helpLink && (
-              <a
-                className="sidebar-fixed-help p-2 hover:text-primary transition-colors"
-                href={helpLink}
-                target="_blank"
-                rel="noreferrer"
-              >
-                <Icon icon="questionCircle" block size={4} />
-              </a>
-            )}
-          </div>
-        </div>
-        <div
-          className={`sidebar-fixed-content flex-1 flex-grow w-full overflow-auto overscroll-none px-5 lg:px-7 break-words ${backgroundShadowEffect.join(
-            ' '
-          )}`}
-        >
-          {children}
-        </div>
-        {footerActions && (
-          <div className="sidebar-fixed-footer flex justify-between items-center p-5 lg:p-7 lg:pt-6">
-            {footerActions}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export const SidebarFixed = React.memo(SidebarFixedComponent)
-
-export interface SidebarFixedProps {
-  /**
-   * React children
-   * Also support render prop
-   */
-  children?: React.ReactNode | ((props: SidebarFixedProps) => React.ReactNode)
-  /**
-   * Bottom actions
-   */
-  footerActions?: React.ReactNode
-  /** Sidebar is open
-   * @default false
-   */
-  isOpen?: boolean
-  /**
-   * Call when sidebar is closed
-   * */
-  onClose?: Function
-  /**
-   * Title displayed in header
-   */
-  title?: string
-  /**
-   * Help external link
-   */
-  helpLink?: string
-}

package/src/Components/SidebarFixed/index.tsx

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

package/src/Components/Table/Table.stories.tsx

@@ -1,188 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Table, TableProps } from './Table'
-import { Icon } from '../../Icons'
-import { Button } from '../Button'
-
-const Link = (props: any) => {
-  return (
-    <a href="#a" {...props}>
-      {props.children}
-    </a>
-  )
-}
-
-const columns = [
-  {
-    id: 'Name',
-    label: 'Name',
-    cellWrapper: Link,
-  },
-  {
-    id: 'Address',
-    label: 'Address',
-    cellWrapper: Link,
-  },
-  {
-    id: 'Price',
-    label: <small>KA</small>,
-    textAlign: 'center',
-    size: 'w-1/6',
-    cellWrapper: Link,
-  },
-  {
-    id: 'Count',
-    label: 'Count',
-    size: 'w-1/6',
-    cellWrapper: Link,
-  },
-  {
-    id: 'Active',
-    label: 'Active',
-    size: 'w-1/6',
-    textAlign: 'center',
-  },
-  {
-    id: 'Actions',
-    label: 'Actions',
-    size: 'w-16',
-    textAlign: 'center',
-  },
-]
-
-const rows = [
-  {
-    id: 1,
-    Name: 'Example Test',
-    Address: 'Street of Test',
-    Count: 245,
-    Price: (
-      <div>
-        <span className="navy-60 strike">$ 2399.00</span>
-        <br />
-        <span className="navy-60">$ 2299.00</span>
-      </div>
-    ),
-    Active: <Icon icon="trash" />,
-    Actions: <div className="blue" />,
-    cellWrapperProps: { page: 'admin/settings/view', params: { file_name: 1 } },
-  },
-  {
-    id: 2,
-    Name: 'Last Test',
-    Address:
-      'LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong Text',
-    Price: (
-      <span className="yellow">
-        24 <div className="ml1 v-top" />
-      </span>
-    ),
-    Active: <Icon icon="cog" />,
-    Actions: <div className="blue" />,
-    bgColor: 'danger-light',
-    cellWrapperProps: { page: 'admin/settings/view', params: { file_name: 2 } },
-  },
-  {
-    id: 3,
-    Name: 'Example Test',
-    Address: 'Street of Test',
-    Count: 245,
-    Price: (
-      <div>
-        <span className="navy-60 strike">$ 2399.00</span>
-      </div>
-    ),
-    Active: <Icon icon="copy" />,
-    Actions: <div className="blue" />,
-    cellWrapperProps: { page: 'admin/settings/view', params: { file_name: 3 } },
-  },
-  {
-    id: 4,
-    Name: 'Last Test',
-    Address: 'Just a big street',
-    Price: (
-      <span className="yellow">
-        24 <div className="ml1 v-top" />
-      </span>
-    ),
-    Active: <Icon icon="edit" />,
-    Actions: <div className="blue" />,
-    bgColor: 'success-light',
-    cellWrapperProps: { page: 'admin/settings/view', params: { file_name: 4 } },
-  },
-]
-
-export default {
-  title: 'Components/Table',
-  component: Table,
-  args: {
-    id: 'tableTest',
-    columns: columns,
-    rows: rows,
-    selectable: false,
-    onChange: (selectedData: number[]) => {
-      console.log('Selected rows data: ', selectedData)
-    },
-  },
-  argTypes: {
-    emptyText: {
-      control: { type: 'text' },
-    },
-  },
-  parameters: {
-    layout: 'padded',
-  },
-} as Meta
-
-const Template: Story<TableProps> = (args) => <Table {...args} />
-
-export const Default = Template.bind({})
-
-export const Loading = Template.bind({})
-Loading.args = {
-  isLoading: true,
-}
-
-export const Empty = Template.bind({})
-Empty.args = {
-  rows: undefined,
-}
-
-export const Selectable = Template.bind({})
-Selectable.args = {
-  selectable: true,
-  onChange: (selectedRows) => {
-    console.log(selectedRows)
-  },
-}
-
-const CustomStateTemplate: Story<TableProps> = (args) => {
-  const [selectedData, setSelectedData] = React.useState<number[]>(
-    args.selectedData || []
-  )
-  React.useEffect(() => {
-    setSelectedData(args.selectedData || [])
-  }, [])
-
-  return (
-    <div>
-      <Button onClick={() => setSelectedData([])}>Reset</Button>
-      <div>Selected rows: {JSON.stringify(selectedData)}</div>
-      <Table
-        {...args}
-        selectedData={selectedData}
-        onChange={(selectedRows) => {
-          const mapped = selectedRows.map((element) => element.index)
-          setSelectedData(mapped)
-        }}
-      ></Table>
-    </div>
-  )
-}
-export const SelectedData = CustomStateTemplate.bind({})
-SelectedData.args = {
-  selectable: true,
-  disabledRows: [0],
-  selectedData: [1],
-}