@okam/stack-ui 1.25.2 → 1.25.3

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

@@ -0,0 +1,36 @@
+'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

@@ -0,0 +1,82 @@
+'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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,43 @@
+'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

@@ -0,0 +1,41 @@
+'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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,133 @@
+'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

@@ -0,0 +1,13 @@
+'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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,23 @@
+{/* 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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,32 @@
+'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/{components/Modal/interface.d.ts → src/components/Modal/interface.ts}

@@ -1,17 +1,20 @@
-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';
+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>;
+  state: OverlayTriggerState
+  children: React.ReactNode
+  transitionComponent?: FunctionComponent<TTransition>
 }
+
 export interface TModalOverlayProps extends AriaModalOverlayProps, TDefaultComponent {
-    children: React.ReactNode;
-    state: OverlayTriggerState;
+  children: React.ReactNode
+  state: OverlayTriggerState
 }
+
 export interface TModalDialogProps extends AriaDialogProps, TDefaultComponent {
-    children: React.ReactNode;
+  children: React.ReactNode
 }