@loadsmart/loadsmart-ui 7.6.0 → 7.7.0-beta.1

package/src/components/TablePagination/TablePaginationActions.tsx

@@ -1,144 +0,0 @@
-import React, { ChangeEvent, KeyboardEvent, useEffect, useState } from 'react'
-
-import { Layout } from 'components/Layout'
-import { Text } from 'components/Text'
-import { TextField } from 'components/TextField'
-import type { TablePaginationActionsProps } from 'components/TablePagination/TablePagination.types'
-import styled from 'styled-components'
-import { Icon, IconProps } from 'components/Icon'
-import Keyboard from 'utils/toolset/keyboard'
-import { NoPaddingButton } from './TablePagination.styles'
-import { prop } from 'tools/index'
-
-export const ActionIcon = styled(Icon).attrs({
-  color: 'neutral-darker',
-  size: '16',
-})<IconProps & { rotate?: number }>`
-  transform: rotate(${prop('rotate', 0)}deg);
-`
-
-function TablePaginationActions({
-  variant = 'default',
-  disabled = false,
-  onPageChange,
-  page,
-  count,
-  rowsPerPage,
-}: TablePaginationActionsProps): JSX.Element {
-  const totalPages = Math.ceil(count / rowsPerPage)
-  const [pageValue, setPageValue] = useState<number | ''>(page + 1)
-  const isCompact = variant === 'compact'
-
-  useEffect(() => {
-    setPageValue(page + 1)
-  }, [page])
-
-  const handleFirstPageClick = () => {
-    onPageChange(0)
-  }
-
-  const handlePreviousPageClick = () => {
-    onPageChange(page - 1)
-  }
-
-  const handleNextPageClick = () => {
-    onPageChange(page + 1)
-  }
-
-  const handleLastPageClick = () => {
-    onPageChange(totalPages - 1)
-  }
-
-  const publishPageChange = () => {
-    if (pageValue && pageValue - 1 !== page) {
-      onPageChange(pageValue - 1)
-    }
-  }
-
-  const handleKeyUp = (e: KeyboardEvent) => {
-    if (Keyboard(e).is('ENTER')) {
-      publishPageChange()
-    }
-  }
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (Keyboard(e).is(['E_LOWERCASE', 'DOT', 'MINUS', 'PLUS'])) {
-      e.preventDefault()
-    }
-  }
-
-  const handlePageChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value === '') {
-      setPageValue('')
-      return
-    }
-
-    const numberValue = Number(e.target.value)
-
-    if (!numberValue || numberValue < 1 || numberValue > totalPages) return
-
-    setPageValue(numberValue)
-  }
-
-  return (
-    <Layout.Group space="s" align="center">
-      {!isCompact && (
-        <NoPaddingButton
-          onClick={handleFirstPageClick}
-          disabled={page === 0 || disabled}
-          title="First page"
-        >
-          <ActionIcon name="caret-right-last" rotate={180} />
-        </NoPaddingButton>
-      )}
-      <NoPaddingButton
-        onClick={handlePreviousPageClick}
-        disabled={page === 0 || disabled}
-        title="Previous page"
-      >
-        <ActionIcon name="caret-left" />
-      </NoPaddingButton>
-      {!isCompact && (
-        <>
-          <TextField
-            type="number"
-            min={1}
-            max={totalPages}
-            disabled={disabled || totalPages === 1}
-            onChange={handlePageChange}
-            onBlur={publishPageChange}
-            onKeyUp={handleKeyUp}
-            onKeyDown={handleKeyDown}
-            scale="small"
-            value={count ? pageValue : 0}
-            title="Page"
-          />
-          <Text variant="body" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
-            of{' '}
-            <Text variant="body-bold" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
-              {totalPages}
-            </Text>
-          </Text>
-        </>
-      )}
-      <NoPaddingButton
-        onClick={handleNextPageClick}
-        disabled={page >= totalPages - 1 || disabled}
-        title="Next page"
-      >
-        <ActionIcon name="caret-right" />
-      </NoPaddingButton>
-      {!isCompact && (
-        <NoPaddingButton
-          onClick={handleLastPageClick}
-          disabled={page >= totalPages - 1 || disabled}
-          title="Last page"
-        >
-          <ActionIcon name="caret-right-last" />
-        </NoPaddingButton>
-      )}
-    </Layout.Group>
-  )
-}
-
-export default TablePaginationActions

package/src/components/TablePagination/index.ts

@@ -1,2 +0,0 @@
-export { default as TablePagination } from './TablePagination'
-export type { TablePaginationProps } from './TablePagination.types'

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import type { Meta } from '@storybook/react'
-
-import Tab, { TabsProps } from './Tabs'
-import { Button } from '../Button'
-
-export default {
-  title: 'Components/Tabs',
-  component: Tab,
-  argTypes: {
-    direction: {
-      control: {
-        type: 'select',
-        options: ['horizontal', 'vertical'],
-      },
-    },
-  },
-} as Meta
-
-export function Playground(args: TabsProps): JSX.Element {
-  return (
-    <Tab className="flex flex-col" {...args}>
-      <Tab.Items>
-        <Tab.Item name="tab-1" default leading={<span>&spades;</span>}>
-          Single quote
-        </Tab.Item>
-        <Tab.Item name="tab-2" leading={<span>&clubs;</span>}>
-          Multi-quote
-        </Tab.Item>
-        <Tab.Item name="tab-3" leading={<span>&clubs;</span>}>
-          Quote
-        </Tab.Item>
-      </Tab.Items>
-      <Tab.Panels>
-        <Tab.Panel name="tab-1">I am the first tab!</Tab.Panel>
-        <Tab.Panel name="tab-2">And I am the second!</Tab.Panel>
-        <Tab.Panel name="tab-3">What is up!</Tab.Panel>
-      </Tab.Panels>
-    </Tab>
-  )
-}
-
-Playground.args = {
-  direction: 'horizontal',
-}
-
-export function Controlled(): JSX.Element {
-  const [tab, setTab] = React.useState('tab-1')
-
-  return (
-    <>
-      <Button onClick={() => setTab('tab-2')}>Go to Multi-quote</Button>
-
-      <Tab activeTab={tab} onTabChange={(tab) => setTab(tab)}>
-        <Tab.Items>
-          <Tab.Item name="tab-1">Single quote</Tab.Item>
-          <Tab.Item name="tab-2">Multi-quote</Tab.Item>
-        </Tab.Items>
-        <Tab.Panels>
-          <Tab.Panel name="tab-1">I am the first tab!</Tab.Panel>
-          <Tab.Panel name="tab-2">And I am the second!</Tab.Panel>
-        </Tab.Panels>
-      </Tab>
-    </>
-  )
-}
-
-Controlled.args = {
-  direction: 'horizontal',
-}
-
-Controlled.parameters = {
-  docs: {
-    source: {
-      type: 'code',
-    },
-  },
-}

package/src/components/Tabs/Tabs.test.tsx

@@ -1,103 +0,0 @@
-import React, { Fragment } from 'react'
-import renderer, { fire } from '../../tests/renderer'
-import { screen } from '@testing-library/react'
-
-import Tabs from './Tabs'
-
-import { Controlled } from './Tabs.stories'
-
-const setup = ({ ...overrides }) => renderer(<Tabs {...overrides} />).render()
-
-describe('Tabs', () => {
-  it('switches between tabs', () => {
-    setup({
-      children: (
-        <Fragment>
-          <Tabs.Items>
-            <Tabs.Item name="tab-1" default>
-              Tabs 1
-            </Tabs.Item>
-            <Tabs.Item name="tab-2">Tabs 2</Tabs.Item>
-          </Tabs.Items>
-          <Tabs.Panels>
-            <Tabs.Panel name="tab-1">first content</Tabs.Panel>
-            <Tabs.Panel name="tab-2">second content</Tabs.Panel>
-          </Tabs.Panels>
-        </Fragment>
-      ),
-    })
-
-    expect(screen.getByText('first content')).toHaveAttribute('aria-hidden', 'false')
-    expect(screen.getByText('second content')).toHaveAttribute('aria-hidden', 'true')
-
-    fire.click(screen.getByText('Tabs 2'))
-
-    expect(screen.getByText('first content')).toHaveAttribute('aria-hidden', 'true')
-    expect(screen.getByText('second content')).toHaveAttribute('aria-hidden', 'false')
-  })
-
-  it('calls custom action when changing tabs', () => {
-    const secondTabsFn = jest.fn()
-    renderer(
-      <Tabs>
-        <Tabs.Items>
-          <Tabs.Item name="tab-1" default>
-            Tabs 1
-          </Tabs.Item>
-          <Tabs.Item name="tab-2" onChange={secondTabsFn}>
-            Tabs 2
-          </Tabs.Item>
-        </Tabs.Items>
-        <Tabs.Panels>
-          <Tabs.Panel name="tab-1">first content</Tabs.Panel>
-          <Tabs.Panel name="tab-2">second content</Tabs.Panel>
-        </Tabs.Panels>
-      </Tabs>
-    ).render()
-
-    fire.click(screen.getByText('Tabs 2'))
-
-    expect(secondTabsFn).toHaveBeenCalledTimes(1)
-  })
-
-  it('handles controlled state', () => {
-    renderer(<Controlled />).render()
-
-    expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Single quote')
-
-    fire.click(screen.getByRole('button', { name: 'Go to Multi-quote' }))
-
-    expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Multi-quote')
-  })
-
-  it('mounts only the visible tab when using the `lazy` prop', () => {
-    setup({
-      children: (
-        <Fragment>
-          <Tabs.Items>
-            <Tabs.Item name="tab-1" default>
-              Tabs 1
-            </Tabs.Item>
-            <Tabs.Item name="tab-2">Tabs 2</Tabs.Item>
-          </Tabs.Items>
-          <Tabs.Panels>
-            <Tabs.Panel name="tab-1" lazy>
-              first content
-            </Tabs.Panel>
-            <Tabs.Panel name="tab-2" lazy>
-              second content
-            </Tabs.Panel>
-          </Tabs.Panels>
-        </Fragment>
-      ),
-    })
-
-    expect(screen.getByText('first content')).toBeInTheDocument()
-    expect(screen.queryByText('second content')).not.toBeInTheDocument()
-
-    fire.click(screen.getByDisplayValue('tab-2'))
-
-    expect(screen.getByText('second content')).toBeInTheDocument()
-    expect(screen.queryByText('first content')).not.toBeInTheDocument()
-  })
-})

package/src/components/Tabs/Tabs.tsx

@@ -1,287 +0,0 @@
-import React, {
-  HTMLAttributes,
-  useContext,
-  useState,
-  useEffect,
-  ChangeEvent,
-  ReactNode,
-} from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import { TabContext } from './TabsContext'
-import conditional, { whenProps } from 'tools/conditional'
-import font from 'styles/font'
-import hoverable from 'styles/hoverable'
-import disableable from 'styles/disableable'
-import transition from 'styles/transition'
-import useID from 'hooks/useID'
-
-import type { WithDirectionProps, WithActiveProps } from './Tabs.types'
-import clsx from 'clsx'
-
-const TabsItemsWrapper = styled.ul`
-  display: flex;
-
-  padding: 0;
-
-  border-bottom-color: ${token('color-neutral-lighter')};
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-`
-
-const StyledSpan = styled.span`
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-
-  pointer-events: none;
-`
-
-const Children = styled(StyledSpan)`
-  flex: 1;
-`
-
-const Leading = styled(StyledSpan)`
-  /* placeholder */
-`
-
-const StyledListItem = styled.li`
-  display: flex;
-`
-
-const StyledLabel = styled.label<WithActiveProps & WithDirectionProps>`
-  ${font({
-    height: 'font-height-2',
-    weight: 'font-weight-bold',
-  })}
-  ${transition()}
-
-  font-size: ${token('font-size-4')};
-  text-transform: uppercase;
-  text-align: ${conditional({
-    center: whenProps({ direction: 'vertical' }),
-    justify: whenProps({ direction: 'horizontal' }),
-  })};
-
-  ${hoverable`
-    color: ${token('color-neutral-darker')};
-    background-color: ${token('color-neutral-light')}33;
-  `}
-
-  ${disableable`
-    color: ${token('color-neutral-dark')}33;
-    background-color: ${token('color-neutral-light')};
-  `}
-
-  padding: ${token('space-m')} ${token('space-l')};
-  display: inline-flex;
-  flex-direction: ${conditional({
-    row: whenProps({ direction: 'horizontal' }),
-    column: whenProps({ direction: 'vertical' }),
-  })};
-
-  cursor: pointer;
-
-  position: relative;
-  bottom: -2px;
-
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-
-  border-color: ${conditional({
-    'color-transparent': whenProps({ active: false }),
-    'color-primary': whenProps({ active: true }),
-  })};
-
-  color: ${conditional({
-    'color-neutral': whenProps({ active: false }),
-    'neutral-darker': whenProps({ active: true }),
-  })};
-
-  ${Leading} + ${Children} {
-    margin: ${conditional({
-        '0': whenProps({ direction: 'horizontal' }),
-        'space-2xs': whenProps({ direction: 'vertical' }),
-      })}
-      0 0
-      ${conditional({
-        'space-s': whenProps({ direction: 'horizontal' }),
-        '0': whenProps({ direction: 'vertical' }),
-      })};
-  }
-`
-
-type TabsItemsProps = HTMLAttributes<HTMLUListElement>
-
-function TabsItems({ children, ...props }: TabsItemsProps) {
-  return (
-    <TabsItemsWrapper {...props} role="tablist">
-      {children}
-    </TabsItemsWrapper>
-  )
-}
-
-interface TabsItemProps extends HTMLAttributes<HTMLInputElement> {
-  name: string
-  default?: boolean
-  leading?: ReactNode
-  disabled?: boolean
-}
-
-function TabsItem({
-  children,
-  name,
-  default: isDefault,
-  className,
-  onChange,
-  leading,
-  disabled = false,
-  ...props
-}: TabsItemProps) {
-  const { id: tabId, setActiveTab, activeTab, direction } = useContext(TabContext)
-
-  const isActive = activeTab === name
-
-  function handleSelect(event: ChangeEvent<HTMLInputElement>) {
-    setActiveTab(name)
-    onChange?.(event)
-  }
-
-  useEffect(() => {
-    if (!activeTab && isDefault) {
-      setActiveTab(name)
-    }
-  }, [activeTab, name, setActiveTab, isDefault])
-
-  return (
-    <StyledListItem role="tab" aria-selected={isActive ? 'true' : 'false'}>
-      <StyledLabel
-        className={clsx(
-          {
-            'is-disabled': disabled,
-          },
-          className
-        )}
-        active={activeTab === name}
-        direction={direction}
-      >
-        <input
-          {...props}
-          value={name}
-          checked={isActive}
-          disabled={disabled}
-          type="radio"
-          name={tabId}
-          onChange={handleSelect}
-          hidden
-        />
-        {leading && <Leading>{leading}</Leading>}
-        {children && <Children>{children}</Children>}
-      </StyledLabel>
-    </StyledListItem>
-  )
-}
-
-type PanelsItemsProps = HTMLAttributes<HTMLDivElement>
-
-const PanelsItemsWrapper = styled.div`
-  /* placeholder */
-`
-
-const PanelsItemWrapper = styled.article`
-  display: ${conditional({
-    block: whenProps({ 'aria-hidden': false }),
-    none: whenProps({ 'aria-hidden': true }),
-  })};
-`
-
-function PanelsItems({ children, ...props }: PanelsItemsProps) {
-  return <PanelsItemsWrapper {...props}>{children}</PanelsItemsWrapper>
-}
-
-interface PanelsItemProps extends HTMLAttributes<HTMLElement> {
-  name: string
-  /**
-   * Renders the Panel.Item only when is visible
-   * @default false
-   */
-  lazy?: boolean
-}
-
-function PanelsItem({ children, name, lazy = false, ...props }: PanelsItemProps) {
-  const { activeTab } = useContext(TabContext)
-
-  const hidden = activeTab !== name
-
-  return (
-    <PanelsItemWrapper {...props} role="tabpanel" aria-hidden={hidden}>
-      {lazy && hidden ? null : children}
-    </PanelsItemWrapper>
-  )
-}
-
-export interface TabsProps extends HTMLAttributes<HTMLElement>, WithDirectionProps {
-  activeTab?: string
-  onTabChange?: (tab: string) => void
-}
-
-const TabsWrapper = styled.div`
-  ${TabsItemsWrapper} + ${PanelsItemsWrapper} {
-    margin: ${token('space-xl')} 0 0 0;
-  }
-`
-
-/**
- * @example
- * <Tabs>
-    <Tabs.Items>
-      <Tabs.Item name="tab-1" default>
-        Tabs 1
-      </Tabs.Item>
-      <Tabs.Item name="tab-2">Tabs 2</Tabs.Item>
-    </Tabs.Items>
-    <Tabs.Panels>
-      <Tabs.Panel name="tab-1">first content</Tabs.Panel>
-      <Tabs.Panel name="tab-2">second content</Tabs.Panel>
-    </Tabs.Panels>
- * </Tabs>
- */
-function Tabs({
-  children,
-  direction = 'horizontal',
-  id: propId,
-  activeTab: propTab = '',
-  onTabChange,
-  ...props
-}: TabsProps): JSX.Element {
-  const [activeTab, setActiveTab] = useState(propTab)
-  const id = useID(propId)
-
-  useEffect(() => {
-    if (propTab) {
-      setActiveTab(propTab)
-    }
-  }, [propTab])
-
-  useEffect(() => {
-    onTabChange?.(activeTab)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeTab])
-
-  return (
-    <TabsWrapper {...props}>
-      <TabContext.Provider value={{ activeTab, setActiveTab, id, direction }}>
-        {children}
-      </TabContext.Provider>
-    </TabsWrapper>
-  )
-}
-
-Tabs.Items = TabsItems
-Tabs.Item = TabsItem
-Tabs.Panels = PanelsItems
-Tabs.Panel = PanelsItem
-
-export default Tabs

package/src/components/Tabs/Tabs.types.ts

@@ -1,7 +0,0 @@
-export interface WithDirectionProps {
-  direction?: 'horizontal' | 'vertical'
-}
-
-export interface WithActiveProps {
-  active?: boolean
-}

package/src/components/Tabs/TabsContext.ts

@@ -1,10 +0,0 @@
-import { createContext } from 'react'
-
-interface TabContextValue {
-  id: string
-  activeTab: string
-  setActiveTab: (name: string) => void
-  direction?: 'horizontal' | 'vertical'
-}
-
-export const TabContext = createContext<TabContextValue>({} as TabContextValue)

package/src/components/Tabs/index.ts

@@ -1,2 +0,0 @@
-export { default as Tabs } from './Tabs'
-export type { TabsProps } from './Tabs'