@okam/stack-ui 1.25.3 → 1.25.6

package/src/components/Popover/index.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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