@okam/stack-ui 1.25.2 → 1.25.3

package/src/components/Popover/index.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+/* eslint-disable react/display-name */
+import type { FocusableElement } from '@react-types/shared'
+import type { RefObject } from 'react'
+import React from 'react'
+import {
+  DismissButton,
+  FocusRing,
+  FocusScope,
+  mergeProps,
+  OverlayContainer,
+  useDialog,
+  useModal,
+  useOverlay,
+  useOverlayPosition,
+  useOverlayTrigger,
+} from 'react-aria'
+import { useOverlayTriggerState } from 'react-stately'
+import useThemeContext from '../../providers/Theme/hooks'
+import { BoxWithForwardRef } from '../Box'
+import { ButtonWithForwardRef } from '../Button'
+import type { IPopoverProps, TPopoverButtonProps } from './interface'
+
+const Popover = React.forwardRef((props: IPopoverProps, ref: React.Ref<HTMLElement>) => {
+  const {
+    isOpen,
+    onClose,
+    children,
+    positionProps,
+    themeName = 'popover',
+    tokens,
+    customTheme,
+    isDismissable,
+    shouldCloseOnBlur,
+    ...rest
+  } = props
+
+  // Handle events that should cause the popup to close,
+  // e.g. blur, clicking outside, or pressing the escape key.
+  const { overlayProps } = useOverlay(
+    {
+      isDismissable,
+      shouldCloseOnBlur,
+      isOpen,
+      onClose,
+    },
+    ref as RefObject<Element>,
+  )
+
+  const { modalProps } = useModal()
+  const { dialogProps } = useDialog({}, ref as RefObject<FocusableElement>)
+
+  const theme = useThemeContext(`${themeName}.popover`, tokens, customTheme)
+
+  // Add a hidden <DismissButton> component at the end of the popover
+  // to allow screen reader users to dismiss the popup easily.
+  return (
+    <FocusScope autoFocus restoreFocus contain>
+      <BoxWithForwardRef
+        customTheme={theme}
+        {...mergeProps(overlayProps, modalProps, dialogProps)}
+        ref={ref}
+        {...positionProps}
+        {...rest}
+      >
+        {React.Children.map(children, (child) => (
+          <FocusRing focusRingClass="has-focus-ring">{child}</FocusRing>
+        ))}
+        <DismissButton onDismiss={onClose} />
+      </BoxWithForwardRef>
+    </FocusScope>
+  )
+})
+
+function PopoverButton(props: TPopoverButtonProps) {
+  const {
+    children,
+    buttonProps,
+    placement = 'right',
+    offset = 5,
+    themeName = 'popover',
+    tokens,
+    customTheme,
+    ...rest
+  } = props
+  const state = useOverlayTriggerState({})
+
+  const triggerRef = React.useRef(null)
+  const overlayRef = React.useRef<HTMLDivElement>(null)
+
+  // Get props for the trigger and overlay. This also handles
+  // hiding the overlay when a parent element of the trigger scrolls
+  // (which invalidates the popover positioning).
+  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef)
+
+  // Get popover positioning props relative to the trigger
+  const { overlayProps: positionProps } = useOverlayPosition({
+    targetRef: triggerRef,
+    overlayRef,
+    placement,
+    offset,
+    isOpen: state.isOpen,
+  })
+
+  const { onPress: handlePress, ...triggerButtonProps } = triggerProps
+
+  return (
+    <>
+      <ButtonWithForwardRef
+        themeName={`${themeName}.button`}
+        handlePress={handlePress}
+        {...buttonProps}
+        {...triggerButtonProps}
+        ref={triggerRef}
+      />
+      {state.isOpen && (
+        <OverlayContainer>
+          <Popover
+            themeName={themeName}
+            tokens={tokens}
+            customTheme={customTheme}
+            {...overlayProps}
+            {...rest}
+            positionProps={positionProps}
+            ref={overlayRef}
+            isOpen={state.isOpen}
+            onClose={state.close}
+          >
+            {children}
+          </Popover>
+        </OverlayContainer>
+      )}
+    </>
+  )
+}
+
+export default PopoverButton

package/src/components/Popover/interface.ts

@@ -0,0 +1,25 @@
+import type { DOMAttributes } from '@react-types/shared'
+import type React from 'react'
+import type { Placement } from 'react-aria'
+import type { TDefaultComponent } from '../../types/components'
+import type { TButtonProps } from '../Button/interface'
+
+export interface IPopoverProps extends TDefaultComponent {
+  isOpen?: boolean
+  onClose?: () => void
+  children: React.ReactElement | React.ReactElement[]
+  positionProps?: DOMAttributes
+  isDismissable?: boolean
+  shouldCloseOnBlur?: boolean
+}
+
+export interface TPopoverButtonProps extends TDefaultComponent, IPopoverProps {
+  offset?: number
+  buttonProps: TButtonProps
+  placement?: Placement
+  children: React.ReactElement | React.ReactElement[]
+}
+
+export type TPopoverProps = DOMAttributes & IPopoverProps
+
+export type PopoverOrientation = 'left' | 'right'

package/src/components/Popover/popover.stories.mdx

@@ -0,0 +1,66 @@
+{/* typo.stories.mdx */}
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { OverlayProvider } from 'react-aria'
+import Popover from './index'
+
+<Meta
+  title="BASE COMPONENTS/Popover"
+  component={Popover}
+  args={{
+    as: 'span',
+    buttonProps: {
+      children: 'Open popover',
+    },
+  }}
+/>
+
+export const Template = (args) => (
+  <div>
+    <OverlayProvider>
+      <Popover {...args}>
+        <a href="#" className={`focus-ring-black`}>
+          Hello world!
+        </a>
+        <a href="#" className={`focus-ring-black`}>
+          Hello world! 2
+        </a>
+        <a href="#" className={`focus-ring-black`}>
+          Hello world! 3
+        </a>
+      </Popover>
+    </OverlayProvider>
+  </div>
+)
+
+# Popover
+
+## Default
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      variant: 'p',
+      offset: 20,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Closes when interacting outside
+
+<Canvas>
+  <Story
+    name="Closes when inteacting outside"
+    args={{
+      variant: 'p',
+      offset: 20,
+      isDismissable: true,
+      shouldCloseOnBlur: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/ShareButton/index.tsx

@@ -0,0 +1,172 @@
+'use client'
+
+import type { PressEvent } from '@react-types/shared'
+import React, { useState } from 'react'
+import { FocusScope, useFocusManager } from 'react-aria'
+import useThemeContext from '../../providers/Theme/hooks'
+import Button, { ButtonWithForwardRef } from '../Button'
+import Icon from '../Icon'
+import type { TIconsContainerProps, TShareButtonProps } from './interface'
+
+export const IconsContainer = (props: TIconsContainerProps) => {
+  const { sharingLinksList, id, isOpen, setIsOpen, onShare, themeName = 'shareButton', tokens, customTheme } = props
+
+  const linksListTheme = useThemeContext(`${themeName}.linksList`, { ...tokens, isOpen }, customTheme)
+
+  const focusManager = useFocusManager()
+
+  const handleKeyDown: React.KeyboardEventHandler = (e) => {
+    if (e.key === 'Escape') {
+      setIsOpen(false)
+    }
+    const { listDirection } = tokens ?? {}
+
+    if (listDirection === 'row') {
+      if (e.key === 'ArrowRight') {
+        focusManager?.focusNext({ wrap: true })
+        e.preventDefault()
+      }
+      if (e.key === 'ArrowLeft') {
+        focusManager?.focusPrevious({ wrap: true })
+        e.preventDefault()
+      }
+    }
+    if (listDirection === 'column') {
+      if (e.key === 'ArrowDown') {
+        focusManager?.focusNext({ wrap: true })
+        e.preventDefault()
+      }
+      if (e.key === 'ArrowUp') {
+        focusManager?.focusPrevious({ wrap: true })
+        e.preventDefault()
+      }
+    }
+  }
+
+  return (
+    <div className={linksListTheme} id={id} role="listbox" tabIndex={-1} onKeyDown={handleKeyDown}>
+      {sharingLinksList?.map((link) => {
+        const { ariaLabel, onClick, href, icon, key } = link
+
+        return (
+          <Button
+            key={key}
+            themeName={`${themeName}.link`}
+            tokens={{ ...tokens, isOpen }}
+            handlePress={() => {
+              onShare?.(key)
+              onClick?.(key)
+            }}
+            aria-label={ariaLabel}
+            {...(href ? { href, rel: 'noopener noreferrer', target: '_blank', as: 'a' } : {})}
+            role="option"
+          >
+            <Icon themeName={`${themeName}.linkIcons`} icon={icon} />
+          </Button>
+        )
+      })}
+    </div>
+  )
+}
+
+const ShareButton = (props: TShareButtonProps) => {
+  const {
+    ariaLabel,
+    icon,
+    id,
+    sharingLinksList,
+    onShare,
+    customTheme,
+    themeName = 'shareButton',
+    tokens,
+    ...rest
+  } = props
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  const containerTheme = useThemeContext(`${themeName}.container`, tokens, customTheme)
+
+  const handleClick = (e: PressEvent) => {
+    setIsOpen(!isOpen)
+    if (isOpen) {
+      return
+    }
+    setTimeout(() => {
+      const firstOption = e.target.parentElement?.lastChild?.firstChild as HTMLElement
+      firstOption?.focus()
+    })
+  }
+
+  const handleKeyDown: React.KeyboardEventHandler = (e) => {
+    const openShareButton = e.currentTarget.firstChild as HTMLElement
+    const listBox = e.currentTarget.lastChild as HTMLElement
+    const firstOption = listBox.firstChild as HTMLElement
+
+    const lastOption = listBox.lastChild as HTMLElement
+
+    const { listDirection } = tokens ?? {}
+
+    if (listDirection === 'row') {
+      if (e.key === 'ArrowRight' && e.target === openShareButton) {
+        firstOption?.focus()
+        e.preventDefault()
+      }
+      if (e.key === 'ArrowLeft' && e.target === openShareButton) {
+        lastOption.focus()
+        e.preventDefault()
+      }
+    }
+
+    if (listDirection === 'column') {
+      if (e.key === 'ArrowDown' && e.target === openShareButton) {
+        firstOption?.focus()
+        e.preventDefault()
+      }
+      if (e.key === 'ArrowUp' && e.target === openShareButton) {
+        lastOption.focus()
+        e.preventDefault()
+      }
+    }
+
+    if (e.key === 'Escape') {
+      setIsOpen(false)
+      openShareButton?.focus()
+    }
+    if (document.activeElement === listBox) {
+      openShareButton?.focus()
+    }
+  }
+
+  return (
+    <FocusScope autoFocus restoreFocus contain={isOpen}>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div className={containerTheme} onKeyDown={handleKeyDown}>
+        <ButtonWithForwardRef
+          themeName={`${themeName}.button`}
+          tokens={{ ...tokens, isOpen }}
+          aria-label={ariaLabel}
+          aria-haspopup="listbox"
+          aria-expanded={isOpen ? 'true' : 'false'}
+          aria-controls="share-buttons"
+          handlePress={handleClick}
+          {...rest}
+        >
+          <Icon themeName={`${themeName}.icon`} icon={icon ?? 'Share'} />
+        </ButtonWithForwardRef>
+        {isOpen && (
+          <IconsContainer
+            id={id}
+            sharingLinksList={sharingLinksList}
+            onShare={onShare}
+            isOpen={isOpen}
+            setIsOpen={setIsOpen}
+            themeName={themeName}
+            customTheme={customTheme}
+            tokens={tokens}
+          />
+        )}
+      </div>
+    </FocusScope>
+  )
+}
+export default ShareButton

package/src/components/ShareButton/interface.ts

@@ -0,0 +1,29 @@
+import type React from 'react'
+import type { TToken } from '../../providers/Theme/interface'
+import type { TDefaultComponent } from '../../types/components'
+
+export interface TShareButtonProps extends TDefaultComponent<TShareButtonTokens> {
+  id: string
+  icon?: React.ReactNode
+  ariaLabel: string
+  sharingLinksList: TShareButtonLink[]
+  onShare?: (sharingMedium: string) => void
+  offset?: number
+}
+
+interface TShareButtonTokens extends TToken {
+  listDirection: 'row' | 'column'
+}
+
+export interface TIconsContainerProps extends Omit<TShareButtonProps, 'ariaLabel' | 'icon'> {
+  isOpen: boolean
+  setIsOpen: (isOpen: boolean) => void
+}
+
+export interface TShareButtonLink {
+  ariaLabel: string
+  icon?: React.ReactNode
+  key: string
+  onClick?: (linkKey: string) => void
+  href?: string
+}

package/src/components/ShareButton/share-button.stories.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { ArgTypes } from '@storybook/blocks'
+import ShareButtonExample from '../../storybook/ShareButtonExample'
+
+<Meta title="Base Components/Share Button" component={ShareButtonExample} onShare={() => console.log('shared')} />
+
+export const Template = (args) => <ShareButtonExample {...args} />
+
+# ShareButton
+
+#### Share button component. Can be used to display sharing links to other social media platforms or other medias (email, links, etc.)
+
+## Props
+
+<ArgTypes />
+
+## Showcase
+
+## Column share button
+
+<Canvas>
+  <Story
+    name="Column Share Button"
+    args={{
+      tokens: {
+        listDirection: 'column',
+      },
+      offset: 20,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Row share button
+
+<Canvas>
+  <Story
+    name="Row Share Button"
+    args={{
+      tokens: {
+        listDirection: 'row',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/ShareButton/utils/generateUtmTags.ts

@@ -0,0 +1,4 @@
+const generateUtmTags = (source: string, medium: string, campaign = 'sharing_tool') =>
+  `?utm_source=${source}&utm_medium=${medium}&utm_campaign=${campaign}`
+
+export default generateUtmTags

package/src/components/ShareButton/utils/useFacebookShareUrl.ts

@@ -0,0 +1,15 @@
+'use client'
+
+import generateUtmTags from './generateUtmTags'
+import useWindow from './useWindow'
+
+const useFacebookShareUrl = (media: string, medium: string, urlToShare: string) => {
+  const { windowLocation, windowTitle } = useWindow()
+
+  const currentURL = urlToShare ?? windowLocation
+  const utm = generateUtmTags(media, medium)
+  const fullUrl = `${currentURL}${utm}`
+  return `https://www.facebook.com/sharer.php?u=${fullUrl}&t=${windowTitle}`
+}
+
+export default useFacebookShareUrl

package/src/components/ShareButton/utils/useMailToShareUrl.ts

@@ -0,0 +1,15 @@
+'use client'
+
+import generateUtmTags from './generateUtmTags'
+import useWindow from './useWindow'
+
+const useMailToShareUrl = (media: string, medium: string, urlToShare: string) => {
+  const { windowLocation, windowTitle } = useWindow()
+
+  const currentURL = urlToShare ?? windowLocation
+  const utm = generateUtmTags(media, medium)
+  const fullUrl = `${currentURL}${utm}`
+  return `mailto:?to=&body=${windowTitle}%20${fullUrl}`
+}
+
+export default useMailToShareUrl

package/src/components/ShareButton/utils/useTwitterShareUrl.ts

@@ -0,0 +1,15 @@
+'use client'
+
+import generateUtmTags from './generateUtmTags'
+import useWindow from './useWindow'
+
+const useTwitterShareUrl = (media: string, medium: string, urlToShare: string) => {
+  const { windowLocation } = useWindow()
+
+  const currentURL = urlToShare ?? windowLocation
+  const utm = generateUtmTags(media, medium)
+  const fullUrl = `${currentURL}${utm}`
+  return `https://twitter.com/intent/tweet?text=${fullUrl}`
+}
+
+export default useTwitterShareUrl

package/src/components/ShareButton/utils/useWindow.ts

@@ -0,0 +1,17 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+const useWindow = () => {
+  const [windowLocation, setWindowLocation] = useState<string>()
+  const [windowTitle, setWindowTitle] = useState<string>()
+
+  useEffect(() => {
+    setWindowLocation(window.location.href)
+    setWindowTitle(window.document.title)
+  }, [])
+
+  return { windowLocation, windowTitle }
+}
+
+export default useWindow

package/src/components/SidePanel/index.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import React from 'react'
+import Div100vh from 'react-div-100vh'
+import { useSidePanel } from '../../providers/SidePanel'
+import useThemeContext from '../../providers/Theme/hooks'
+import RenderWithSlide from '../../transitions/RenderWithSlide'
+import SidePanelTransition from '../../transitions/SidePanelTransition'
+import Modal from '../Modal'
+import type { TSidePanelProps } from './interface'
+
+const SidePanel = (props: TSidePanelProps) => {
+  const {
+    children,
+    closeBtnRender,
+    themeName = 'sidePanel',
+    tokens,
+    TransitionAnimation = RenderWithSlide,
+    PanelTransition = SidePanelTransition,
+    customTheme,
+  } = props
+
+  const wrapperTheme = useThemeContext(`${themeName}.wrapper`, tokens, customTheme)
+  const containerTheme = useThemeContext(`${themeName}.container`, tokens, customTheme)
+  const innerContainerTheme = useThemeContext(`${themeName}.innerContainer`, tokens, customTheme)
+
+  const { overlayState, overlayProps } = useSidePanel()
+
+  return (
+    <Modal state={overlayState} {...overlayProps} transitionComponent={PanelTransition} isDismissable>
+      <Div100vh className={wrapperTheme}>
+        {closeBtnRender && closeBtnRender()}
+        <TransitionAnimation isVisible={overlayState.isOpen}>
+          <div className={containerTheme}>
+            <div className={innerContainerTheme}>{children}</div>
+          </div>
+        </TransitionAnimation>
+      </Div100vh>
+    </Modal>
+  )
+}
+
+export default React.memo(SidePanel)

package/src/components/SidePanel/interface.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react'
+import type React from 'react'
+import type { TDefaultComponent } from '../../types/components'
+
+export interface ISidePanelProps extends HTMLAttributes<HTMLElement> {
+  id: string
+  children?: React.ReactNode
+  closeBtnRender?: () => React.ReactNode
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  TransitionAnimation?: (props: unknown) => JSX.Element
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  PanelTransition?: (props: unknown) => JSX.Element
+  onCloseCallBack?: () => void
+}
+
+export type TSidePanelProps = ISidePanelProps & TDefaultComponent

package/src/components/SidePanel/side-panel.stories.mdx

@@ -0,0 +1,44 @@
+{/* side-panel.stories.mdx */}
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { ButtonWithForwardRef } from '../Button'
+import SidePanel from './'
+import { SidePanelContextProvider, useSidePanel } from '../../providers/SidePanel'
+
+<Meta 
+  title="BASE COMPONENTS/Side Panel" 
+  component={SidePanel} 
+  args={{
+    
+  }}
+/>
+
+export const SidePanelControl = () => {
+  const { buttonProps } = useSidePanel()
+  if (buttonProps == null) {
+    return null
+  }
+  return (
+    <ButtonWithForwardRef variant="black" {...buttonProps?.openButtonProps} ref={buttonProps?.openButtonRef}>
+      Open
+    </ButtonWithForwardRef>
+  )
+}
+
+export const Template = (args) => (
+  <SidePanelContextProvider 
+    onOpenCallback={() => console.log('Side panel is now opened!')}
+    onCloseCallback={() => console.log('Side panel is now closed!')}
+  >
+    <SidePanelControl />
+    <SidePanel {...args}>
+      <div>Hello world!</div>
+    </SidePanel>
+  </SidePanelContextProvider>
+)
+
+# Side Panel
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>

package/src/components/TabList/components/Tab/Tab.tsx

@@ -0,0 +1,19 @@
+import { useTab } from '@react-aria/tabs'
+import React from 'react'
+import { ButtonWithForwardRef } from '../../../Button'
+import type { TTab } from '../../interface'
+
+function Tab({ item, state }: TTab) {
+  const { key, rendered } = item
+  const ref = React.useRef(null)
+  const { tabProps } = useTab({ key }, state, ref)
+  const isDisabled = state.disabledKeys.has(key)
+
+  return (
+    <ButtonWithForwardRef {...tabProps} ref={ref} disabled={isDisabled}>
+      {rendered}
+    </ButtonWithForwardRef>
+  )
+}
+
+export default Tab