@okam/stack-ui 1.25.3 → 1.25.6

package/src/components/Lightbox/hooks/overlay/index.tsx

@@ -1,36 +0,0 @@
-'use client'
-
-import { useSlotId } from '@react-aria/utils'
-import type { RefObject } from 'react'
-import type { OverlayTriggerProps } from 'react-aria'
-import { useOverlayTrigger } from 'react-aria'
-import type { OverlayTriggerState } from 'react-stately'
-
-function useOverlayHook(props: OverlayTriggerProps, state: OverlayTriggerState, ref?: RefObject<Element>) {
-  const { type = 'dialog' } = props
-  const {
-    triggerProps: { onPress, ...triggerProps },
-    overlayProps,
-  } = useOverlayTrigger({ type }, state, ref)
-
-  const updatedTriggerProps = {
-    handlePress: onPress,
-    ...triggerProps,
-  }
-
-  const labelId = useSlotId()
-
-  const openTriggerProps = {
-    'aria-labelledby': labelId,
-    ...updatedTriggerProps,
-  }
-
-  return {
-    openTriggerProps,
-    triggerProps: updatedTriggerProps,
-    labelProps: { id: labelId },
-    overlayProps: { ...overlayProps, 'aria-labelledby': labelId },
-  }
-}
-
-export default useOverlayHook

package/src/components/Lightbox/index.tsx

@@ -1,82 +0,0 @@
-'use client'
-
-import { FocusRing } from '@react-aria/focus'
-import { useOverlayTriggerState } from 'react-stately'
-import Box from '../Box'
-import Button from '../Button'
-import type { TButtonProps } from '../Button/interface'
-import Icon from '../Icon'
-import Modal from '../Modal'
-import Typography from '../Typography'
-import useOverlayHook from './hooks/overlay'
-import type { TLightboxProps } from './interface'
-
-const LightboxCloseButton = (props: TButtonProps) => {
-  const { themeName, tokens, children, ...rest } = props
-  return (
-    <Button themeName={themeName} tokens={tokens} {...rest}>
-      <Icon icon="CloseBtn" />
-    </Button>
-  )
-}
-
-const Lightbox = (props: TLightboxProps) => {
-  const {
-    children,
-    thumbnailContent,
-    label,
-    themeName = 'lightBox',
-    tokens,
-    closeButton: CloseButton = LightboxCloseButton,
-    setOpen,
-    isOpen,
-    closeButtonAriaLabel,
-    transitionComponent,
-  } = props
-
-  const state = useOverlayTriggerState(props)
-
-  const { openTriggerProps, triggerProps, overlayProps, labelProps } = useOverlayHook(
-    { ...props, type: 'dialog' },
-    state,
-  )
-
-  const handleOpen: TButtonProps['handlePress'] = (e) => {
-    setOpen?.(!isOpen)
-    openTriggerProps.handlePress?.(e)
-  }
-
-  return (
-    <>
-      <FocusRing focusRingClass="has-focus-ring" within>
-        <Button themeName={`${themeName}.wrapper`} tokens={tokens} {...openTriggerProps} handlePress={handleOpen}>
-          {label && (
-            <Typography themeName={`${themeName}.label`} tokens={{ size: 'footnotes' }} {...labelProps}>
-              {label}
-            </Typography>
-          )}
-          {thumbnailContent}
-        </Button>
-      </FocusRing>
-      <Modal
-        themeName={`${themeName}.modal`}
-        tokens={tokens}
-        state={state}
-        {...overlayProps}
-        transitionComponent={transitionComponent}
-      >
-        <CloseButton
-          themeName={`${themeName}.closeBtn`}
-          tokens={tokens}
-          aria-label={closeButtonAriaLabel}
-          {...triggerProps}
-        />
-        <Box themeName={`${themeName}.container`} tokens={tokens}>
-          {children}
-        </Box>
-      </Modal>
-    </>
-  )
-}
-
-export default Lightbox

package/src/components/Lightbox/interface.ts

@@ -1,28 +0,0 @@
-import type { DOMAttributes } from '@react-types/shared'
-import type React from 'react'
-import type { Dispatch, FunctionComponent, SetStateAction } from 'react'
-import type { OverlayTriggerProps as AriaOverlayTriggerProps } from 'react-aria'
-import type { OverlayTriggerProps } from 'react-stately'
-import type { TDefaultComponent, TTransition } from '../../types/components'
-import type { TButtonProps } from '../Button/interface'
-
-type TCloseButtonProps =
-  | React.ForwardRefExoticComponent<TButtonProps & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>
-  | FunctionComponent<TButtonProps>
-
-export interface LightboxProps extends TDefaultComponent, OverlayTriggerProps, Omit<AriaOverlayTriggerProps, 'type'> {
-  closeButtonAriaLabel?: string
-  setOpen?: Dispatch<SetStateAction<boolean>>
-  closeButton?: TCloseButtonProps
-  transitionComponent?: FunctionComponent<TTransition>
-}
-
-export interface TLightboxProps extends LightboxProps {
-  label: string
-  thumbnailContent: React.ReactNode
-}
-
-export interface LightboxAria {
-  overlayProps: DOMAttributes & { label?: string }
-  labelProps: DOMAttributes
-}

package/src/components/Lightbox/lightbox.stories.mdx

@@ -1,79 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import { ArgTypes } from '@storybook/blocks'
-import Lightbox from './'
-import LightboxControlledState from '../../storybook/Lightbox/LightboxControlledState'
-import Image from 'next/image'
-import image from '../../../static/images/image.png'
-
-<Meta
-  title="BASE COMPONENTS/Lightbox"
-  component={Lightbox}
-  argTypes={{
-    label: {
-      description: 'Used for accessibility and/or for displaying a label',
-      control: {
-        type: 'text'
-      },
-    },
-    thumbnailContent: {
-      description: `The lightbox's preview content`
-    },
-    onOpenChange: {
-      description: 'Callback for executing some code when the state of the lightbox changes. Passes a boolean `isOpen`'
-    },
-    closeButton: {
-      description: `To replace the lightbox's default close button`
-    },
-    closeButtonAriaLabel: {
-      description: `Adds accessibility to the lightbox's default close button`,
-      control: {
-        type: 'text'
-      },
-    },
-    isOpen: {
-      description: 'Handles an optional controlled state'
-    },
-    setOpen: {
-      description: `Allows the lightbox component's thumbnail to still controll the lightbox's state even in a case of controlled state`
-    }
-  }}
-  args={{
-    label: 'Open Dialog',
-    thumbnailContent: <Image src={image} width={570} height={762} alt="Dog picture" />,
-    onOpenChange: (isOpen) => console.log(`Lightbox is now ${isOpen}`),
-    closeButtonAriaLabel: 'Close the modal',
-  }}
-/>
-
-export const Template = (args) => {
-  return (
-    <Lightbox {...args}>
-      <Image src={image} width={570} height={762} alt="Lightbox preview" />
-    </Lightbox>
-  )
-}
-
-export const TemplateControlledState = (args) => {
-  return (
-    <LightboxControlledState {...args}>
-      <Image src={image} width={570} height={762} alt="Lightbox preview" />
-    </LightboxControlledState>
-  )
-}
-
-# Lightbox
-
-## Props
-<ArgTypes />
-
-## Showcase
-
-### Default
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-### With a controlled state
-<Canvas>
-  <Story name="ControlledState">{TemplateControlledState.bind({})}</Story>
-</Canvas>

package/src/components/Menu/Menu.tsx

@@ -1,43 +0,0 @@
-'use client'
-
-import { useMenu } from '../../providers/Menu'
-import { useSidePanel } from '../../providers/SidePanel'
-import RenderWithOpacity from '../../transitions/RenderWithOpacity'
-import Box from '../Box'
-import InnerContent from './components/InnerContent'
-import type TMenuProps from './interface'
-
-const Menu = (props: TMenuProps) => {
-  const {
-    id = 'main-menu',
-    children,
-    PanelTransition = RenderWithOpacity,
-    themeName,
-    tokens,
-    customTheme,
-    ...rest
-  } = props
-  const { overlayState } = useSidePanel()
-  const { closeBtn } = useMenu()
-
-  return (
-    <PanelTransition isVisible={overlayState?.isOpen}>
-      <Box themeName={`${themeName}.wrapper`}>
-        {closeBtn && closeBtn()}
-        <Box themeName={`${themeName}.container`}>
-          <InnerContent
-            id={id}
-            themeName={`${themeName}.innerContent`}
-            tokens={tokens}
-            customTheme={customTheme}
-            {...rest}
-          >
-            {children}
-          </InnerContent>
-        </Box>
-      </Box>
-    </PanelTransition>
-  )
-}
-
-export default Menu

package/src/components/Menu/MenuSidePanel.tsx

@@ -1,41 +0,0 @@
-'use client'
-
-import { useMenu } from '../../providers/Menu'
-import SidePanel from '../SidePanel'
-import InnerContent from './components/InnerContent'
-import type { TMenuSidePanelProps } from './interface'
-
-const MenuSidePanel = (props: TMenuSidePanelProps) => {
-  const {
-    id = 'main-menu',
-    children,
-    TransitionAnimation,
-    PanelTransition,
-    themeName,
-    tokens,
-    customTheme,
-    ...rest
-  } = props
-  const { closeBtn, tabState, defaultSelectedKey } = useMenu()
-
-  return (
-    <SidePanel
-      themeName={`${themeName}.sidePanel`}
-      tokens={tokens}
-      customTheme={customTheme}
-      closeBtnRender={closeBtn}
-      id={id}
-      TransitionAnimation={TransitionAnimation as (props: unknown) => JSX.Element}
-      PanelTransition={PanelTransition as (props: unknown) => JSX.Element}
-      onCloseCallBack={() => {
-        tabState?.setSelectedKey(defaultSelectedKey)
-      }}
-    >
-      <InnerContent id={id} themeName={themeName} tokens={tokens} customTheme={customTheme} {...rest}>
-        {children}
-      </InnerContent>
-    </SidePanel>
-  )
-}
-
-export default MenuSidePanel

package/src/components/Menu/components/InnerContent.tsx

@@ -1,26 +0,0 @@
-import { useMenu } from '../../../providers/Menu'
-import Box from '../../Box'
-import type TMenuProps from '../interface'
-import TabContainer from './TabContainer'
-
-const InnerContent = (props: TMenuProps) => {
-  const { themeName, tokens, customTheme, children, beforeTabContent, afterTabContent } = props
-  const { tabState, defaultSelectedKey } = useMenu()
-  return (
-    <>
-      <Box themeName={`${themeName}.wrapper`} tokens={tokens} customTheme={customTheme}>
-        {children}
-      </Box>
-
-      {tabState?.selectedKey?.toString() === defaultSelectedKey ? null : (
-        <Box themeName={`${themeName}.tabWrapper`} tokens={tokens} customTheme={customTheme}>
-          {beforeTabContent !== null && beforeTabContent}
-          <TabContainer themeName={`${themeName}.tabPanel`} tokens={tokens} customTheme={customTheme} />
-          {afterTabContent !== null && afterTabContent}
-        </Box>
-      )}
-    </>
-  )
-}
-
-export default InnerContent

package/src/components/Menu/components/MenuItems.tsx

@@ -1,133 +0,0 @@
-'use client'
-
-import NextLink from 'next/link'
-import React, { useCallback, useRef } from 'react'
-import { useMenu } from '../../../providers/Menu'
-import Box from '../../Box'
-import Button, { Anchor } from '../../Button'
-import type { TMenuItemProps, TMenuItemsProps } from '../interface'
-
-const ButtonElement = (menuItem: TMenuItemProps) => {
-  const { tabState, defaultSelectedKey } = useMenu()
-  const { setSelectedKey } = tabState
-  const { id, path, label, themeName = 'button', tokens, customTheme, target, children, childItems, ...rest } = menuItem
-  const itemKey = path?.substring(1)
-
-  const handlePress = useCallback(() => {
-    if (itemKey == null) {
-      return
-    }
-
-    if (tabState.selectedKey === itemKey) {
-      setSelectedKey(defaultSelectedKey)
-      return
-    }
-
-    setSelectedKey(itemKey)
-  }, [itemKey, tabState.selectedKey, setSelectedKey, defaultSelectedKey])
-
-  return (
-    <Button
-      {...rest}
-      themeName={`${themeName}`}
-      tokens={tokens}
-      customTheme={customTheme}
-      key={`button-${id}`}
-      handlePress={handlePress}
-    >
-      {React.isValidElement(children) ? children : label}
-    </Button>
-  )
-}
-
-const LinkElement = (menuItem: TMenuItemProps) => {
-  const {
-    id,
-    target,
-    path,
-    label,
-    themeName = 'anchor',
-    customTheme,
-    tokens,
-    nextLinkProps,
-    children,
-    childItems,
-    ...rest
-  } = menuItem
-  const ref = useRef(null)
-
-  if (path == null || label == null) {
-    return null
-  }
-
-  return (
-    <Anchor
-      {...rest}
-      themeName={`${themeName}`}
-      tokens={tokens}
-      customTheme={customTheme}
-      nextLinkProps={{
-        scroll: false,
-        href: path,
-        ...nextLinkProps,
-      }}
-      ref={ref}
-      key={`link-${id}`}
-      as={NextLink}
-      target={target ?? '_self'}
-    >
-      {React.isValidElement(children) ? children : label}
-    </Anchor>
-  )
-}
-
-const MenuItems = (props: TMenuItemsProps) => {
-  const { menuItems, children, themeName = 'menuItem', tokens, customTheme } = props
-
-  return (
-    <Box themeName={`${themeName}.wrapper`} tokens={tokens} customTheme={customTheme}>
-      <Box themeName={`${themeName}.container`} tokens={tokens} customTheme={customTheme}>
-        {menuItems?.map((menuItem) => {
-          const { id, path, label, ...rest } = menuItem ?? {}
-
-          const menuItemTokens = { ...tokens, ...menuItem.tokens }
-
-          if (menuItem?.path == null || menuItem.id == null) {
-            return null
-          }
-
-          const elementType = menuItem.path?.startsWith('#') ? 'button' : 'a'
-          return (
-            <Box
-              themeName={`${themeName}.innerContent`}
-              tokens={menuItemTokens}
-              customTheme={customTheme}
-              key={`li-${menuItem.id}`}
-            >
-              {elementType === 'button' ? (
-                <ButtonElement
-                  {...rest}
-                  {...menuItem}
-                  themeName={`${themeName}.button`}
-                  tokens={menuItemTokens}
-                  customTheme={customTheme}
-                />
-              ) : (
-                <LinkElement
-                  {...rest}
-                  {...menuItem}
-                  themeName={`${themeName}.anchor`}
-                  tokens={menuItemTokens}
-                  customTheme={customTheme}
-                />
-              )}
-            </Box>
-          )
-        })}
-      </Box>
-      {children}
-    </Box>
-  )
-}
-
-export default MenuItems

package/src/components/Menu/components/TabContainer.tsx

@@ -1,13 +0,0 @@
-'use client'
-
-import { useMenu } from '../../../providers/Menu'
-import type { TDefaultComponent } from '../../../types/components'
-import TabPanel from '../../TabList/components/TabPanel/TabPanel'
-
-const TabContainer = (props: TDefaultComponent) => {
-  const { tabState } = useMenu()
-
-  return <TabPanel {...props} key={tabState.selectedItem?.key} state={tabState} />
-}
-
-export default TabContainer

package/src/components/Menu/interface.ts

@@ -1,41 +0,0 @@
-import type { AriaTabListProps } from '@react-types/tabs'
-import type { LinkProps } from 'next/link'
-import type React from 'react'
-import type { Maybe, TDefaultComponent } from '../../types/components'
-
-export type MenuProps = {
-  id: string
-  children: React.ReactNode
-  beforeTabContent?: React.ReactNode
-  afterTabContent?: React.ReactNode
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  PanelTransition?: (props: unknown) => JSX.Element
-}
-
-export type TMenuProps = AriaTabListProps<MenuProps> & MenuProps & TDefaultComponent
-
-export type TMenuSidePanelProps = TMenuProps & {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  TransitionAnimation?: (props: unknown) => JSX.Element
-}
-
-export type PartialHtmlBaseElement = Omit<Partial<HTMLBaseElement>, 'id' | 'onClick' | 'target' | 'role' | 'children'>
-
-export interface IMenuItemProp {
-  childItems?: Maybe<TMenuItemProps[] | null>
-  id?: string
-  target?: string | null
-  path?: string
-  label?: string
-  nextLinkProps?: LinkProps
-  onClick?: () => void
-}
-
-export type TMenuItemProps = IMenuItemProp & TDefaultComponent & PartialHtmlBaseElement
-
-export interface TMenuItemsProps extends TDefaultComponent {
-  menuItems?: TMenuItemProps[] | null
-  children?: React.ReactNode
-}
-
-export default TMenuProps

package/src/components/Menu/menu.stories.mdx

@@ -1,23 +0,0 @@
-{/* menu */}
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import MenuContent from '../../storybook/Menu/Menu'
-import NestedMenuContent from '../../storybook/Menu/NestedMenu'
-
-<Meta title="Layout/Menu" component={MenuContent} />
-
-export const Template = (args) => <MenuContent />
-
-export const TemplateNested = (args) => <NestedMenuContent />
-
-# Menu
-
-## Side panel menu
-<Canvas>
-  <Story name="Menu">{Template.bind({})}</Story>
-</Canvas>
-
-## Nested menu
-<Canvas>
-  <Story name="Nested Menu">{TemplateNested.bind({})}</Story>
-</Canvas>

package/src/components/Modal/components/ModalDialog.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { FocusRing, FocusScope, useDialog } from 'react-aria'
-import { BoxWithForwardRef } from '../../Box'
-import type { TModalDialogProps } from '../interface'
-
-const ModalDialog = (props: TModalDialogProps) => {
-  const { children, themeName, tokens, customTheme } = props
-
-  const ref = React.useRef(null)
-
-  const { dialogProps } = useDialog(props, ref)
-
-  return (
-    <BoxWithForwardRef
-      themeName={`${themeName}.dialog`}
-      tokens={tokens}
-      customTheme={customTheme}
-      ref={ref}
-      aria-modal
-      {...dialogProps}
-    >
-      <FocusRing focusRingClass="has-focus-ring" within autoFocus>
-        <FocusScope contain restoreFocus autoFocus>
-          {children}
-        </FocusScope>
-      </FocusRing>
-    </BoxWithForwardRef>
-  )
-}
-
-export default ModalDialog

package/src/components/Modal/components/ModalOverlay.tsx

@@ -1,21 +0,0 @@
-import { useRef } from 'react'
-import { useModalOverlay } from 'react-aria'
-import Box, { BoxWithForwardRef } from '../../Box'
-import type { TModalOverlayProps } from '../interface'
-
-const ModalOverlay = (props: TModalOverlayProps) => {
-  const { themeName, tokens, customTheme, children, state, ...rest } = props
-
-  const ref = useRef(null)
-  const { modalProps, underlayProps } = useModalOverlay(rest, state, ref)
-
-  return (
-    <Box themeName={`${themeName}.underlay`} tokens={tokens} customTheme={customTheme} {...underlayProps}>
-      <BoxWithForwardRef ref={ref} themeName={`${themeName}.overlay`} tokens={tokens} {...modalProps}>
-        {children}
-      </BoxWithForwardRef>
-    </Box>
-  )
-}
-
-export default ModalOverlay

package/src/components/Modal/index.tsx

@@ -1,32 +0,0 @@
-'use client'
-
-import { OverlayContainer } from 'react-aria'
-import ModalTransition from '../../transitions/ModalTransition'
-import ModalDialog from './components/ModalDialog'
-import ModalOverlay from './components/ModalOverlay'
-import type { TModalProps } from './interface'
-
-const Modal = (props: TModalProps) => {
-  const {
-    children,
-    transitionComponent: TransitionComponent = ModalTransition,
-    state,
-    themeName,
-    tokens,
-    ...rest
-  } = props
-
-  return (
-    <OverlayContainer>
-      <TransitionComponent isVisible={state.isOpen}>
-        <ModalOverlay themeName={themeName} tokens={tokens} state={state} {...rest}>
-          <ModalDialog themeName={themeName} tokens={tokens} {...rest}>
-            {children}
-          </ModalDialog>
-        </ModalOverlay>
-      </TransitionComponent>
-    </OverlayContainer>
-  )
-}
-
-export default Modal

package/src/components/Modal/interface.ts

@@ -1,20 +0,0 @@
-import type { OverlayTriggerState } from '@react-stately/overlays'
-import type React from 'react'
-import type { FunctionComponent } from 'react'
-import type { AriaDialogProps, AriaModalOverlayProps } from 'react-aria'
-import type { TDefaultComponent, TTransition } from '../../types/components'
-
-export interface TModalProps extends AriaModalOverlayProps, TDefaultComponent {
-  state: OverlayTriggerState
-  children: React.ReactNode
-  transitionComponent?: FunctionComponent<TTransition>
-}
-
-export interface TModalOverlayProps extends AriaModalOverlayProps, TDefaultComponent {
-  children: React.ReactNode
-  state: OverlayTriggerState
-}
-
-export interface TModalDialogProps extends AriaDialogProps, TDefaultComponent {
-  children: React.ReactNode
-}