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

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,83 +0,0 @@
-import React from 'react'
-import type { Meta, Story } from '@storybook/react'
-
-import { Drawer, useDrawer } from '.'
-import type { DrawerProps } from './Drawer'
-import { Button } from 'components/Button'
-
-export default {
-  title: 'Components/Drawer',
-  component: Drawer,
-  argTypes: {
-    open: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    className: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-const TWENTY_SIZE_ARR = Array.from({ length: 20 })
-
-export const Playground: Story<DrawerProps> = ({ open, ...others }: DrawerProps) => {
-  const { open: isOpen, show, hide } = useDrawer({ open: open })
-
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center">
-        <Button onClick={show}>Open Drawer</Button>
-        <Drawer {...others} open={isOpen} onClose={hide} onClickOutside={hide}>
-          <Drawer.Header>Drawer Header</Drawer.Header>
-          <Drawer.Body>
-            {TWENTY_SIZE_ARR.map((_, index) => (
-              <h1 key={index} className="mb-6">
-                Drawer Body...
-              </h1>
-            ))}
-          </Drawer.Body>
-          <Drawer.Footer className="justify-end">
-            <Button onClick={hide}>Close Drawer</Button>
-          </Drawer.Footer>
-        </Drawer>
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  open: false,
-}
-
-export const SmallerContentPlayground: Story<DrawerProps> = ({ open, ...others }: DrawerProps) => {
-  const { open: isOpen, show, hide } = useDrawer({ open: open })
-
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center">
-        <Button onClick={show}>Open Drawer</Button>
-        <Drawer {...others} open={isOpen} onClose={hide} onClickOutside={hide}>
-          <Drawer.Header>Drawer Header</Drawer.Header>
-          <Drawer.Body>
-            {TWENTY_SIZE_ARR.slice(0, 3).map((_, index) => (
-              <h1 key={index} className="mb-6">
-                Drawer Body...
-              </h1>
-            ))}
-          </Drawer.Body>
-          <Drawer.Footer className="justify-end">
-            <Button onClick={hide}>Close Drawer</Button>
-          </Drawer.Footer>
-        </Drawer>
-      </div>
-    </div>
-  )
-}
-
-SmallerContentPlayground.args = {
-  open: false,
-}

package/src/components/Drawer/Drawer.test.tsx

@@ -1,90 +0,0 @@
-import React from 'react'
-import renderer, { fire, screen } from '../../tests/renderer'
-
-import type { DrawerProps } from './Drawer'
-import Drawer from './Drawer'
-import { fireEvent, waitFor } from '@testing-library/react'
-
-const setup = (props: DrawerProps) => renderer(<Drawer {...props} />).render()
-
-describe('Drawer', () => {
-  it('renders with close button', () => {
-    setup({
-      open: true,
-      onClose: jest.fn(),
-    })
-
-    screen.getByRole('dialog', { name: 'drawer' })
-    screen.getByRole('button', { name: 'close' })
-  })
-
-  it('calls onClose when close button is clicked', () => {
-    const props = {
-      open: true,
-      onClose: jest.fn(),
-    }
-    setup(props)
-
-    fire.click(screen.getByRole('button', { name: 'close' }))
-    expect(props.onClose).toHaveBeenCalled()
-  })
-
-  it('closes drawer only when clicking outside', async () => {
-    const props = {
-      open: true,
-      onClickOutside: jest.fn(),
-    }
-
-    setup(props)
-
-    fireEvent.mouseUp(screen.getByRole('dialog'))
-
-    await waitFor(() => {
-      expect(props.onClickOutside).not.toHaveBeenCalled()
-    })
-
-    fireEvent.mouseUp(screen.getByRole('complementary'))
-
-    await waitFor(() => {
-      expect(props.onClickOutside).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  it('renders without close button', () => {
-    setup({
-      open: true,
-    })
-
-    expect(screen.queryByRole('button', { name: 'close' })).not.toBeInTheDocument()
-  })
-
-  it('renders with header', () => {
-    setup({
-      open: true,
-      onClose: jest.fn(),
-      children: <Drawer.Header data-testid="drawer-header">Header</Drawer.Header>,
-    })
-
-    screen.getByTestId('drawer-header')
-  })
-
-  it('renders with body', () => {
-    setup({
-      open: true,
-      onClose: jest.fn(),
-      children: <Drawer.Body data-testid="drawer-body">Header</Drawer.Body>,
-    })
-
-    screen.getByTestId('drawer-body')
-  })
-
-  it('renders with footer', () => {
-    setup({
-      open: true,
-      onClose: jest.fn(),
-      children: <Drawer.Footer data-testid="drawer-footer">Header</Drawer.Footer>,
-    })
-
-    screen.getByTestId('drawer-footer')
-  })
-})

package/src/components/Drawer/Drawer.tsx

@@ -1,225 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import React, { ReactNode, useEffect, useRef, useState } from 'react'
-import ReactDOM from 'react-dom'
-import styled from 'styled-components'
-
-import transition from 'styles/transition'
-import conditional, { whenProps } from 'tools/conditional'
-import { getToken as token } from 'theming'
-import DefaultCloseButton from 'common/CloseButton'
-
-export interface DrawerProps {
-  children?: ReactNode
-  className?: string
-  open: boolean
-  onClose?: () => void
-  onClickOutside?: () => void
-}
-
-const StyledAside = styled.aside<Pick<DrawerProps, 'open'>>`
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  z-index: ${token('z-index-overlay')};
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-
-  background: ${token('modal-overlay-background')};
-
-  visibility: ${conditional({
-    visible: whenProps({ open: true }),
-    hidden: whenProps({ open: false }),
-  })};
-`
-
-const CloseButton = styled(DefaultCloseButton)`
-  position: absolute;
-  top: 32px;
-  left: -48px;
-
-  background-color: ${token('color-neutral-lighter')};
-`
-
-const StyledSection = styled.section<Pick<DrawerProps, 'open'>>`
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 40vw;
-  height: 100%;
-
-  background-color: ${token('color-neutral-lightest')};
-  border-radius: ${token('border-radius-s')};
-  box-shadow: ${token('shadow-modal')};
-
-  transform: ${conditional({
-    'translateX(100%)': whenProps({
-      open: false,
-    }),
-    'translateX(0px)': whenProps({
-      open: true,
-    }),
-  })};
-
-  ${transition({
-    property: 'transform',
-    duration: '200ms',
-  })}
-`
-
-const StyledHeader = styled.header`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  padding: ${token('space-xl')};
-
-  color: ${token('color-neutral-darker')};
-  font-weight: ${token('font-weight-bold')};
-  font-size: ${token('font-size-2')};
-  text-align: center;
-
-  border-bottom-color: ${token('color-neutral-light')};
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-`
-
-const StyledBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  padding: ${token('space-xl')};
-
-  overflow: auto;
-`
-
-const StyledFooter = styled.footer`
-  display: flex;
-
-  padding: ${token('space-xl')};
-
-  border-top-color: ${token('color-neutral-light')};
-  border-top-width: 1px;
-  border-top-style: solid;
-`
-
-export interface DrawerHeaderProps {
-  className?: string
-}
-
-function DrawerHeader({
-  children,
-  className,
-  ...others
-}: PropsWithChildren<DrawerHeaderProps>): JSX.Element {
-  return (
-    <StyledHeader {...others} className={className}>
-      {children}
-    </StyledHeader>
-  )
-}
-
-export interface DrawerBodyProps {
-  className?: string
-}
-
-function DrawerBody({
-  children,
-  className,
-  ...others
-}: PropsWithChildren<DrawerHeaderProps>): JSX.Element {
-  return (
-    <StyledBody {...others} className={className}>
-      {children}
-    </StyledBody>
-  )
-}
-
-export interface DrawerFooterProps {
-  className?: string
-}
-
-function DrawerFooter({
-  children,
-  className,
-  ...others
-}: PropsWithChildren<DrawerFooterProps>): JSX.Element {
-  return (
-    <StyledFooter {...others} className={className}>
-      {children}
-    </StyledFooter>
-  )
-}
-
-function Drawer({
-  className,
-  children,
-  open,
-  onClose,
-  onClickOutside,
-  ...others
-}: DrawerProps): JSX.Element {
-  const [invisible, setInvisible] = useState(!open)
-  const ref = useRef<HTMLElement>(null)
-
-  function handleTransitionEnd() {
-    if (!open) {
-      setInvisible(true)
-    }
-  }
-
-  useEffect(() => {
-    if (open) {
-      setInvisible(false)
-    }
-  }, [open])
-
-  useEffect(() => {
-    const currentRef = ref.current
-
-    if (currentRef && onClickOutside) {
-      const handleClick = (event: MouseEvent) => {
-        const hasClickedOutside = currentRef.isSameNode(event.target as Element)
-
-        if (hasClickedOutside) onClickOutside()
-      }
-
-      currentRef.addEventListener('mouseup', handleClick)
-
-      return () => currentRef.removeEventListener('mouseup', handleClick)
-    }
-  }, [onClickOutside])
-
-  return ReactDOM.createPortal(
-    <StyledAside open={!invisible} ref={ref}>
-      <StyledSection
-        {...others}
-        className={className}
-        open={open}
-        onTransitionEnd={handleTransitionEnd}
-        role="dialog"
-        aria-modal="true"
-        aria-label="drawer"
-      >
-        {Boolean(onClose) && <CloseButton onClick={onClose} aria-label="close" />}
-        {children}
-      </StyledSection>
-    </StyledAside>,
-    document.body
-  )
-}
-
-Drawer.Header = DrawerHeader
-Drawer.Body = DrawerBody
-Drawer.Footer = DrawerFooter
-
-export default Drawer

package/src/components/Drawer/index.ts

@@ -1,4 +0,0 @@
-export { default as Drawer } from './Drawer'
-export type { DrawerProps, DrawerBodyProps, DrawerFooterProps, DrawerHeaderProps } from './Drawer'
-// alias to useModal which implements the same functionality
-export { useDialog as useDrawer } from '../Dialog'

package/src/components/Dropdown/Dropdown.context.ts

@@ -1,13 +0,0 @@
-import { createContext } from 'react'
-import type { DropdownContextReturn } from './Dropdown.types'
-
-const DropdownContext = createContext<DropdownContextReturn>({
-  disabled: false,
-  expandDisabled: false,
-  expanded: false,
-  toggle: function () {
-    // nothing
-  },
-})
-
-export default DropdownContext

package/src/components/Dropdown/Dropdown.fixtures.ts

@@ -1,15 +0,0 @@
-export const ACTIONS = [
-  { label: 'Change it', value: 'change' },
-  { label: 'Accept it', value: 'accept' },
-  { label: 'Leave it', value: 'leave' },
-]
-
-export const PROFILE_ACTIONS = [
-  { label: 'Settings', value: 'settings' },
-  { label: 'Privacy', value: 'privacy' },
-]
-
-export const SUBSCRIPTION_ACTIONS = [
-  { label: 'View', value: 'view' },
-  { label: 'Upgrade', value: 'upgrade' },
-]

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,259 +0,0 @@
-import React, { useState } from 'react'
-import type { Story, Meta } from '@storybook/react'
-
-import { ACTIONS, PROFILE_ACTIONS, SUBSCRIPTION_ACTIONS } from './Dropdown.fixtures'
-import { Icon } from 'components/Icon'
-import { IconButton } from 'components/Button'
-import { TextField } from 'components/TextField'
-import Dropdown from './Dropdown'
-import DropdownContext from './Dropdown.context'
-
-import type { DropdownProps, DropdownTriggerProps } from './Dropdown.types'
-import { Popover } from 'components/Popover'
-
-const meta: Meta = {
-  title: 'Components/Dropdown',
-  component: Dropdown,
-  argTypes: {
-    onBlur: {
-      table: {
-        disable: true,
-      },
-    },
-    scale: {
-      control: {
-        type: 'select',
-      },
-      options: ['small', 'default', 'large'],
-    },
-  },
-}
-
-export default meta
-
-export type DropdownStoryProps = DropdownProps & {
-  scale: DropdownTriggerProps['scale']
-  outlined?: DropdownTriggerProps['outlined']
-}
-
-export const Playground: Story<DropdownStoryProps> = (args) => {
-  const [message, setMessage] = useState('')
-
-  return (
-    <div className="flex flex-col">
-      <Dropdown {...args}>
-        <Dropdown.Trigger outlined={args.outlined} scale={args.scale}>
-          Actions
-        </Dropdown.Trigger>
-        <Dropdown.Menu>
-          {ACTIONS.map(({ label, value }) => (
-            <Dropdown.Item
-              key={value}
-              onClick={() => {
-                setMessage(label)
-              }}
-            >
-              {label}
-            </Dropdown.Item>
-          ))}
-        </Dropdown.Menu>
-      </Dropdown>
-
-      <output className="mt-4 text-sm text-black" data-testid="output">
-        {message}
-      </output>
-    </div>
-  )
-}
-
-Playground.args = {
-  disabled: false,
-  align: 'start',
-  outlined: true,
-  scale: 'default',
-}
-
-export const WithSections: Story<DropdownStoryProps> = (args) => {
-  const [message, setMessage] = useState('')
-
-  return (
-    <div className="flex flex-col">
-      <Dropdown {...args}>
-        <Dropdown.Trigger outlined={args.outlined}>Sections</Dropdown.Trigger>
-        <Dropdown.Menu>
-          <Dropdown.Section header="My profile">
-            {PROFILE_ACTIONS.map(({ label, value }) => (
-              <Dropdown.Item
-                key={value}
-                onClick={() => {
-                  setMessage(label)
-                }}
-              >
-                {label}
-              </Dropdown.Item>
-            ))}
-          </Dropdown.Section>
-          <Dropdown.Section header="Subscription">
-            {SUBSCRIPTION_ACTIONS.map(({ label, value }) => (
-              <Dropdown.Item
-                key={value}
-                onClick={() => {
-                  setMessage(label)
-                }}
-              >
-                {label}
-              </Dropdown.Item>
-            ))}
-          </Dropdown.Section>
-        </Dropdown.Menu>
-      </Dropdown>
-
-      <output className="mt-4 text-sm text-black" data-testid="output">
-        {message}
-      </output>
-    </div>
-  )
-}
-
-WithSections.args = {
-  disabled: false,
-  outlined: true,
-}
-
-export const Extended: Story<DropdownStoryProps> = (args) => {
-  const [message, setMessage] = useState('')
-
-  return (
-    <div className="flex flex-col">
-      <Dropdown {...args}>
-        <Dropdown.Trigger outlined={args.outlined}>With Header &amp; Footer</Dropdown.Trigger>
-        <Dropdown.Menu
-          header={<p className="px-2">Header</p>}
-          footer={<p className="px-2">A cool footer</p>}
-        >
-          {ACTIONS.map(({ label, value }) => (
-            <Dropdown.Item
-              key={value}
-              onClick={() => {
-                setMessage(label)
-              }}
-            >
-              {label}
-            </Dropdown.Item>
-          ))}
-        </Dropdown.Menu>
-      </Dropdown>
-
-      <output className="mt-4 text-sm text-black" data-testid="output">
-        {message}
-      </output>
-    </div>
-  )
-}
-
-Extended.args = {
-  disabled: false,
-  outlined: true,
-}
-
-function ActionTrigger() {
-  const { toggle, disabled } = React.useContext(DropdownContext)
-
-  return (
-    <Popover.Reference>
-      <IconButton
-        disabled={disabled}
-        onClick={() => {
-          toggle()
-        }}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-        </svg>
-      </IconButton>
-    </Popover.Reference>
-  )
-}
-
-function InputTrigger() {
-  const { toggle, disabled } = React.useContext(DropdownContext)
-
-  return (
-    <Popover.Reference>
-      <TextField
-        onFocus={() => {
-          toggle()
-        }}
-        disabled={disabled}
-      />
-    </Popover.Reference>
-  )
-}
-
-export const CustomTrigger: Story<DropdownStoryProps> = (args) => {
-  const [message, setMessage] = useState('')
-
-  function renderMenu() {
-    return (
-      <Dropdown.Menu>
-        {ACTIONS.map(({ label, value }) => (
-          <Dropdown.Item
-            key={value}
-            onClick={() => {
-              setMessage(label)
-            }}
-          >
-            {label}
-          </Dropdown.Item>
-        ))}
-      </Dropdown.Menu>
-    )
-  }
-
-  return (
-    <div className="flex flex-col">
-      <div className="flex flex-row">
-        <Dropdown {...args}>
-          <Popover.Reference>
-            <Dropdown.Trigger.Button outlined={args.outlined} trailing={null}>
-              {({ expanded }) => {
-                return (
-                  <React.Fragment>
-                    <span className="mr-2">{expanded ? 'Hide' : 'See'} Options</span>
-                    <Icon name={expanded ? 'minus' : 'plus'} />
-                  </React.Fragment>
-                )
-              }}
-            </Dropdown.Trigger.Button>
-          </Popover.Reference>
-          {renderMenu()}
-        </Dropdown>
-        <span className="inline-flex items-center mx-8 text-4xl font-thin border-l border-neutral"></span>
-        <Dropdown {...args}>
-          <ActionTrigger />
-          {renderMenu()}
-        </Dropdown>
-        <span className="inline-flex items-center mx-8 text-4xl font-thin border-l border-neutral"></span>
-        <Dropdown {...args}>
-          <InputTrigger />
-          {renderMenu()}
-        </Dropdown>
-      </div>
-      <output className="mt-4 text-sm text-black" data-testid="output">
-        {message}
-      </output>
-    </div>
-  )
-}
-
-CustomTrigger.args = {
-  disabled: false,
-  outlined: true,
-}