@loja-integrada/admin-components 0.19.4 → 1.0.0

package/src/Layout/Box/Box.stories.tsx

@@ -1,165 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-import { withDesign } from 'storybook-addon-designs'
-
-import { Box, BoxProps } from './Box'
-import { BoxHeaderProps } from './Components/Header/BoxHeader'
-import { BoxContentProps } from './Components/Content/BoxContent'
-
-import { Status, StatusProps } from '../../Indicators/Status'
-import { Tabs, TabsProps } from '../../Components/Tabs'
-
-const BoxHeaderArgs: BoxHeaderProps = {
-  title: 'Box Title',
-  subtitle: 'Box SubTitle',
-}
-
-const BoxContentArgs: BoxContentProps = {
-  children: 'Box Content'
-}
-
-const TabsArgs: TabsProps = {
-  activeItem: 'item1',
-  onChange: (id) => console.log('ID:', id),
-  items: [
-    {
-      id: 'item1',
-      title: 'Item1',
-    },
-    {
-      id: 'item2',
-      title: 'Item2',
-    },
-    {
-      id: 'item3',
-      title: 'Item3',
-    },
-  ]
-}
-
-const ActionArgs: StatusProps = {
-  type: 'success',
-  description: 'Some status',
-  inverted: true,
-}
-
-export default {
-  title: 'Layout/Box',
-  component: Box,
-  decorators: [withDesign],
-  parameters: {
-    layout: 'padded',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/Z2WDD4SH8zwaJC2K5wbtMO/Sistema-Integrado?node-id=95%3A9525',
-    },
-  },
-  argTypes: {
-    children: {
-      control: false
-    }
-  },
-  args: {
-    BoxContent: BoxContentArgs,
-  },
-} as Meta
-
-interface BoxFullProps extends BoxProps {
-  BoxHeader: BoxHeaderProps
-  BoxContent: BoxContentProps
-  Tabs: TabsProps
-  Action: StatusProps
-  showTitle: boolean
-  showTabs: boolean
-  showActions: boolean
-}
-
-const Template: Story<BoxFullProps> = ({
-  showTitle,
-  showTabs,
-  showActions,
-  BoxHeader,
-  BoxContent,
-  Action: ActionArgs,
-  Tabs: TabsArgs,
-  ...args
-}) => {
-  const titleProps = showTitle ? BoxHeader : {}
-  return (
-    <Box {...args}>
-      <>
-        {(showTitle || showTabs || showActions) && (
-          <Box.Header {...titleProps} Tabs={showTabs && <Tabs {...TabsArgs} /> || undefined}>
-            {showActions && <Status {...ActionArgs} />}
-          </Box.Header>
-        )}
-        <Box.Content {...BoxContent} />
-      </>
-    </Box>
-  )
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  BoxHeader: BoxHeaderArgs,
-  Action: ActionArgs,
-  Tabs: TabsArgs,
-  showTitle: true,
-  showTabs: true,
-  showActions: true,
-}
-
-const TemplateWithAction: Story<BoxFullProps> = ({ BoxHeader, BoxContent, Action: ActionArgs, ...args }) => (
-  <Box {...args}>
-    <Box.Header {...BoxHeader}>
-      <Status {...ActionArgs} />
-    </Box.Header>
-    <Box.Content {...BoxContent} />
-  </Box>
-)
-export const WithAction = TemplateWithAction.bind({})
-WithAction.args = {
-  BoxHeader: BoxHeaderArgs,
-  Action: ActionArgs,
-}
-
-const TemplateWithToggle: Story<BoxFullProps> = ({
-  BoxHeader,
-  BoxContent,
-  ...args
-}) => (
-  <Box {...args}>
-    <Box.Header {...BoxHeader} />
-    <Box.Content {...BoxContent} />
-  </Box>
-)
-export const WithToggle = TemplateWithToggle.bind({})
-WithToggle.args = {
-  isToggle: true,
-  BoxHeader: {
-    ...BoxHeaderArgs,
-  },
-}
-
-const TemplateWithTabs: Story<BoxFullProps> = ({ BoxHeader, BoxContent, Tabs: TabsArgs, ...args }) => (
-  <Box {...args}>
-    <Box.Header {...BoxHeader} Tabs={<Tabs {...TabsArgs} />} />
-    <Box.Content {...BoxContent} />
-  </Box>
-)
-export const WithTabs = TemplateWithTabs.bind({})
-WithTabs.args = {
-  BoxHeader: BoxHeaderArgs,
-  Tabs: TabsArgs,
-}
-
-const TemplateOnlyTabs: Story<BoxFullProps> = ({ BoxContent, Tabs: TabsArgs, ...args }) => (
-  <Box {...args}>
-    <Box.Header Tabs={<Tabs {...TabsArgs} />} />
-    <Box.Content {...BoxContent} />
-  </Box>
-)
-export const OnlyTabs = TemplateOnlyTabs.bind({})
-OnlyTabs.args = {
-  Tabs: TabsArgs,
-}

package/src/Layout/Box/Box.tsx

@@ -1,81 +0,0 @@
-import React from 'react'
-
-import { BoxHeader, BoxHeaderProps } from './Components/Header/BoxHeader'
-import { BoxContent, BoxContentProps } from './Components/Content/BoxContent'
-import { BoxSeparator } from './Components/Separator/BoxSeparator'
-import { SharedContext, SharedContextProps, Observer } from './Components/utils'
-
-export class Box extends React.PureComponent<BoxProps, BoxState> {
-  static Header = (props: BoxHeaderProps) => {
-    return <BoxHeader {...props} />
-  }
-  static Content = (props: BoxContentProps) => {
-    return <BoxContent {...props} />
-  }
-  static Separator = () => {
-    return <BoxSeparator />
-  }
-
-  state: BoxState = {
-    isOpen: this.props.isOpen ?? true,
-  }
-
-  render() {
-    const {
-      children,
-      className = '',
-      variant = 'default',
-      isToggle = false,
-      id,
-    } = this.props
-    const toggleContent = (value?: boolean) =>
-      this.setState({ isOpen: value ?? !this.state.isOpen })
-    const { isOpen } = this.state
-    const sharedProps = {
-      variant,
-      isOpen,
-      toggleContent,
-      isToggle,
-    }
-
-    return (
-      <SharedContext.Provider value={sharedProps}>
-        <Observer value={this.props.isOpen ?? true} didUpdate={toggleContent} />
-        <div
-          className={`box w-full flex flex-col bg-base-1 border border-card-stroke rounded ${className}`}
-          data-opened={isOpen}
-          id={id}
-        >
-          {children}
-        </div>
-      </SharedContext.Provider>
-    )
-  }
-}
-
-export interface BoxProps extends Partial<SharedContextProps> {
-  /**
-   * Custom class name
-   * */
-  className?: string
-  /**
-   * Box ID
-   * */
-  id?: string
-  /**
-   * Box Header and Content
-   */
-  children?:
-    | React.ReactElement<BoxContentProps>
-    | Array<React.ReactElement<BoxContentProps>>
-    | React.ReactElement<BoxHeaderProps>
-    | Array<React.ReactElement<BoxHeaderProps>>
-  /**
-   * Box show content
-   * */
-  isOpen?: boolean
-}
-
-interface BoxState {
-  isOpen: boolean
-}

package/src/Layout/Box/Components/Content/BoxContent.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 "./BoxContent.stories"
-
-const { Content } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('BoxContent tests'), () => {
-
-  it('Default', () => {
-    mount(<Content />)
-    cy.get('.box')
-      .should('have.length', 1)
-      .within(() => {
-        cy.get('.box-content').contains('Box Content')
-      })
-  })
-
-})

package/src/Layout/Box/Components/Content/BoxContent.stories.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Box } from '../../Box'
-import { BoxContentProps } from './BoxContent'
-
-export default {
-  title: 'Layout/Box/Content',
-  component: Box.Content,
-  args: {
-    children: 'Box Content'
-  }
-} as Meta
-
-const Template: Story<BoxContentProps> = ({ children, ...args }) => (
-  <Box>
-    <Box.Content {...args}>
-      {children}
-    </Box.Content>
-  </Box>
-)
-
-export const Content = Template.bind({})

package/src/Layout/Box/Components/Content/BoxContent.tsx

@@ -1,26 +0,0 @@
-import React, { useContext } from 'react'
-
-import { SharedContext, defaultPaddingVariantsContent } from '../utils'
-
-export const BoxContent = React.memo(({ children }: BoxContentProps) => {
-  const sharedProps = useContext(SharedContext)
-  const { variant, isOpen } = sharedProps
-
-  return (
-    <div
-      className={`box-content ${defaultPaddingVariantsContent[variant]} ${
-        !isOpen ? 'hidden' : ''
-      }`}
-    >
-      {children}
-    </div>
-  )
-})
-
-export interface BoxContentProps {
-  /**
-   * React children
-   * Also support render prop
-   */
-  children?: React.ReactNode | ((props: BoxContentProps) => React.ReactNode)
-}

package/src/Layout/Box/Components/Header/BoxHeader.spec.tsx

@@ -1,22 +0,0 @@
-import * as React from "react"
-import { composeStories } from "@storybook/testing-react"
-import { mount } from "@cypress/react"
-import * as stories from "./BoxHeader.stories"
-
-const { Header } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('BoxHeader tests'), () => {
-
-  it('Default', () => {
-    mount(<Header />)
-    cy.get('.box .box-header')
-      .should('have.length', 1)
-      .within(() => {
-        cy.get('.box-header-title').should('exist')
-        cy.get('h3').contains('Box Title')
-        cy.get('h4').contains('Box SubTitle')
-      })
-  })
-
-})

package/src/Layout/Box/Components/Header/BoxHeader.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Box, BoxProps } from '../../Box'
-import { BoxHeaderProps } from './BoxHeader'
-
-export default {
-  title: 'Layout/Box/Header',
-  component: Box.Header,
-  argTypes: {
-    Tabs: {
-      control: false
-    },
-    children: {
-      control: false
-    }
-  },
-  args: {
-    title: 'Box Title',
-    subtitle: 'Box SubTitle',
-  },
-} as Meta
-
-interface BoxHeaderPropsWithVariant extends BoxHeaderProps, Pick<BoxProps, 'variant'> {}
-
-const Template: Story<BoxHeaderPropsWithVariant> = (args) => (
-  <Box>
-    <Box.Header {...args} />
-  </Box>
-)
-
-export const Header = Template.bind({})

package/src/Layout/Box/Components/Header/BoxHeader.tsx

@@ -1,93 +0,0 @@
-import React, { useContext } from 'react'
-
-import { TabsProps } from '../../../../Components/Tabs'
-import { SharedContext, defaultPaddingVariantsHeader } from '../utils'
-import { Icon } from '../../../../Icons'
-
-export const BoxHeader = React.memo(
-  ({ children, title, subtitle, Tabs }: BoxHeaderProps) => {
-    const sharedProps = useContext(SharedContext)
-    const { variant, isOpen, toggleContent, isToggle } = sharedProps
-
-    const hasTitle = !!(title || subtitle || children)
-    const hasTabs = !!Tabs
-
-    return (
-      <>
-        <div
-          className={`box-header ${isToggle ? 'cursor-pointer group' : ''} ${
-            defaultPaddingVariantsHeader[variant]
-          } ${hasTabs && isOpen ? '!pb-0' : ''} ${!hasTitle ? '!pt-0' : ''} ${
-            isOpen && !hasTabs ? 'border-b border-card-stroke' : ''
-          }`}
-          onClick={() => (isToggle ? toggleContent() : undefined)}
-        >
-          {hasTitle && (
-            <div
-              className={`box-header-title flex justify-between items-center ${
-                !subtitle ? 'py-1' : ''
-              }`}
-            >
-              <div className="flex-1 min-w-0 mr-2">
-                {title && (
-                  <h3
-                    className={`tracking-3 text-base font-semibold break-words`}
-                  >
-                    {title}
-                  </h3>
-                )}
-                {subtitle && (
-                  <h4 className="tracking-4 text-sm text-on-base-2 leading-6 break-words">
-                    {subtitle}
-                  </h4>
-                )}
-              </div>
-              <div className="flex items-center">
-                {children}
-                {isToggle && (
-                  <button type="button" className="box-toggle ml-2">
-                    <Icon
-                      icon="angleLeft"
-                      className={`text-on-base-2 hover:text-on-base group-hover:text-on-base transition-all origin-center ${
-                        isOpen ? 'rotate-90' : '-rotate-90'
-                      }`}
-                    />
-                  </button>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-        {hasTabs && (
-          <div
-            className={`${
-              defaultPaddingVariantsHeader[variant]
-            } !py-0 border-b border-card-stroke ${!isOpen ? 'hidden' : ''}`}
-          >
-            <div className={`-mb-px ${hasTitle ? 'mt-3' : ''}`}>{Tabs}</div>
-          </div>
-        )}
-      </>
-    )
-  }
-)
-
-export interface BoxHeaderProps {
-  /**
-   * Title of the Box
-   */
-  title?: string | React.ReactNode
-  /**
-   * Subtitle of the Box
-   */
-  subtitle?: string | React.ReactNode
-  /**
-   * React children, use to render actions in Header
-   * Also support render prop
-   */
-  children?: React.ReactNode | ((props: BoxHeaderProps) => React.ReactNode)
-  /**
-   * Use only with "&lt;Tabs /&gt;" component
-   */
-  Tabs?: React.ReactElement<TabsProps>
-}

package/src/Layout/Box/Components/Separator/BoxSeparator.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 "./BoxSeparator.stories"
-
-const { Separator } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('BoxSeparator tests'), () => {
-
-  it('Default', () => {
-    mount(<Separator />)
-    cy.get('.box')
-      .should('have.length', 1)
-      .within(() => {
-        cy.get('.box-content hr.box-content-separator').should('exist')
-      })
-  })
-
-})

package/src/Layout/Box/Components/Separator/BoxSeparator.stories.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Box, BoxProps } from '../../Box'
-
-export default {
-  title: 'Layout/Box/Separator',
-  component: Box.Separator,
-  argTypes: {
-    variant: {
-      options: ['default', 'small'],
-      control: { type: 'radio' }
-    }
-  },
-  args: {
-    variant: 'default',
-  }
-} as Meta
-
-const Template: Story<Pick<BoxProps, 'variant'>> = (args) => (
-  <Box {...args}>
-    <Box.Content>
-      Some content 1
-      <Box.Separator />
-      Some content 2
-    </Box.Content>
-  </Box>
-)
-
-export const Separator = Template.bind({})

package/src/Layout/Box/Components/Separator/BoxSeparator.tsx

@@ -1,19 +0,0 @@
-import React, { useContext } from 'react'
-
-import { SharedContext } from '../utils'
-
-const listOfMarginVariants = {
-  default: `my-6 -mx-6 lg:my-10 lg:-mx-10`,
-  small: `my-6 -mx-6`,
-}
-
-export const BoxSeparator = () => {
-  const sharedProps = useContext(SharedContext)
-  const { variant } = sharedProps
-
-  return (
-    <hr
-      className={`box-content-separator border-card-stroke ${listOfMarginVariants[variant]}`}
-    />
-  )
-}

package/src/Layout/Box/Components/utils.ts

@@ -1,50 +0,0 @@
-import React from 'react'
-
-export interface SharedContextProps {
-  /** Variant type
-   * @default 'default'
-   * */
-  variant: 'default' | 'small'
-  /** Define is box content has visible by default
-   * @default true
-   * */
-  isOpen: boolean
-  /** Show toggle icon
-   * @default false
-   * */
-  isToggle: boolean
-  /**
-   * Expand/collapse box content
-   * */
-  toggleContent(value?: boolean): void
-}
-
-export const SharedContext = React.createContext<SharedContextProps>({
-  variant: 'default',
-  isOpen: true,
-  isToggle: false,
-  toggleContent: (value?: boolean) => value,
-})
-
-export const defaultPaddingVariantsHeader = {
-  default: `px-6 py-4 lg:px-10 lg:py-5`,
-  small: `px-6 py-4`,
-}
-
-export const defaultPaddingVariantsContent = {
-  default: `p-6 lg:p-10`,
-  small: `p-6`,
-}
-
-export const Observer = ({
-  value,
-  didUpdate,
-}: {
-  value: any
-  didUpdate: Function
-}) => {
-  React.useEffect(() => {
-    didUpdate(value)
-  }, [value])
-  return null
-}

package/src/Layout/Box/index.tsx

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

package/src/Layout/Container/Container.spec.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { composeStories } from '@storybook/testing-react'
-import { mount } from '@cypress/react'
-import * as stories from './Container.stories'
-
-import { CONTAINER_MAX_SIZE } from '../constants'
-
-const { Default, Expanded } = composeStories(stories)
-
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
-describe(specTitle('Container tests'), () => {
-  it('Default', () => {
-    mount(<Default />)
-    cy.get('.page-container').should('have.class', CONTAINER_MAX_SIZE.default)
-  })
-
-  it('Expanded', () => {
-    mount(<Expanded />)
-    cy.get('.page-container').should('have.class', CONTAINER_MAX_SIZE.expanded)
-  })
-})
-

package/src/Layout/Container/Container.stories.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { Story, Meta } from '@storybook/react'
-
-import { Container, ContainerProps } from '.'
-import { ActionBar, Box } from '..'
-import { Breadcrumb, Button } from '../..'
-
-export default {
-  title: 'Layout/Container',
-  component: Container,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta
-
-const Template: Story<ContainerProps> = (args) => (
-  <div className="bg-base-2 w-full min-h-screen p-px">
-    <Container {...args}>
-      <Container.Header>
-        <Breadcrumb
-          currentTitle="Page"
-          previousTitle="Previous page"
-        />
-      </Container.Header>
-      <Box>
-        <Box.Header title="Container test" />
-        <Box.Content>
-          <p className="h-64">Container test</p>
-        </Box.Content>
-      </Box>
-    </Container>
-
-    <ActionBar>
-      <Button variant="tertiary" icon="timesCircle" onClick={() => {}}>
-        Cancelar
-      </Button>
-      <Button variant="primary" icon="checkCircle" onClick={() => {}}>
-        <span className="hidden lg:block">Salvar alterações</span>
-        <span className="block lg:hidden">Salvar</span>
-      </Button>
-    </ActionBar>
-  </div>
-)
-
-export const Default = Template.bind({})
-Default.args = {}
-
-export const Expanded = Template.bind({})
-Expanded.args = {
-  expanded: true,
-}