@okam/stack-ui 1.25.2 → 1.25.3

package/src/providers/SidePanel/index.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { createCtx } from '@okam/core-lib'
+import { useMemo, useRef } from 'react'
+import { useOverlayTriggerState } from 'react-stately'
+import useOverlayHook from '../../components/Lightbox/hooks/overlay'
+import type { TSidePanelContext, TSidePanelProviderProps } from './interface'
+
+const [useSidePanel, SidePanelProvider] = createCtx<TSidePanelContext>()
+
+export { useSidePanel }
+
+export function SidePanelContextProvider(props: TSidePanelProviderProps) {
+  const {
+    children,
+    defaultSelectedKey,
+    onOpenCallback,
+    onCloseCallback,
+    defaultIsOpen = false,
+    type = 'dialog',
+  } = props
+
+  const openButtonRef = useRef(null)
+  const closeButtonRef = useRef(null)
+
+  const overlayState = useOverlayTriggerState({
+    defaultOpen: defaultIsOpen,
+    onOpenChange(isOpen) {
+      if (!isOpen) {
+        onCloseCallback?.()
+        return
+      }
+      onOpenCallback?.()
+    },
+  })
+
+  const { triggerProps, overlayProps } = useOverlayHook({ type }, overlayState)
+
+  const value = useMemo<TSidePanelContext>(
+    () => ({
+      overlayProps,
+      defaultSelectedKey,
+      overlayState,
+      buttonProps: {
+        closeButtonProps: triggerProps,
+        closeButtonRef,
+        openButtonProps: triggerProps,
+        openButtonRef,
+      },
+    }),
+    [overlayState, defaultSelectedKey, triggerProps, overlayProps],
+  )
+
+  return <SidePanelProvider value={value}>{children}</SidePanelProvider>
+}

package/src/providers/SidePanel/interface.ts

@@ -0,0 +1,26 @@
+import type { OverlayTriggerState } from '@react-stately/overlays'
+import type { DOMProps } from '@react-types/shared'
+import type React from 'react'
+import type { OverlayTriggerProps } from 'react-aria'
+
+export type TSidePanelProviderProps = Partial<OverlayTriggerProps> & {
+  children: React.ReactNode
+  defaultSelectedKey: string
+  defaultIsOpen?: boolean
+  onOpenCallback?: () => void
+  onCloseCallback?: () => void
+}
+
+export type TButtonProps = {
+  closeButtonProps: React.ButtonHTMLAttributes<HTMLButtonElement>
+  closeButtonRef: React.MutableRefObject<null>
+  openButtonProps: React.HTMLAttributes<HTMLDivElement>
+  openButtonRef: React.MutableRefObject<null>
+}
+
+export type TSidePanelContext = {
+  defaultSelectedKey: string
+  overlayState: OverlayTriggerState
+  buttonProps: TButtonProps
+  overlayProps: DOMProps
+}

package/src/providers/Theme/hooks.ts

@@ -0,0 +1,25 @@
+'use client'
+
+import { get } from 'radash'
+import type { TCustomTheme, TToken } from './interface'
+import { useTheme } from './index'
+
+const useThemeContext = (func?: string | null, props: TToken = {}, customTheme: TCustomTheme = null) => {
+  const theme = useTheme()
+  if (theme != null && func != null) {
+    const { brandTheme } = theme
+    const themeFunc = get(brandTheme, func)
+    if (typeof themeFunc === 'function') {
+      const returnValue = themeFunc?.(props)
+      if (typeof returnValue === 'string') {
+        return returnValue
+      }
+    }
+  }
+  if (!customTheme) {
+    return undefined
+  }
+  return customTheme
+}
+
+export default useThemeContext

package/src/providers/Theme/index.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import React, { useMemo } from 'react'
+import type { TThemeProviderProps, TThemePanelContext, TDefaultTheme, TTheme } from './interface'
+
+export function createCtxNullable<A extends Record<string, unknown> | null>() {
+  const ctx = React.createContext<A | undefined>(undefined)
+  function useCtx() {
+    const c = React.useContext(ctx)
+
+    if (c === undefined) {
+      return null
+    }
+
+    return c
+  }
+  return [useCtx, ctx.Provider] as const // 'as const' makes TypeScript infer a tuple
+}
+
+const defaultTheme: TDefaultTheme = {
+  typography: () => '',
+}
+
+const [useTheme, ThemeProvider] = createCtxNullable<TThemePanelContext<TTheme>>()
+
+export function ThemeContextProvider({ children, brandTheme = defaultTheme }: TThemeProviderProps) {
+  const value = useMemo<TThemePanelContext>(() => ({ brandTheme }), [brandTheme])
+  return <ThemeProvider value={value}>{children}</ThemeProvider>
+}
+
+export const createThemeProvider = (brandTheme: TTheme) => {
+  const ThemeProviderContext = ({ children }: { children: React.ReactNode }) => (
+    <ThemeContextProvider brandTheme={brandTheme}>{children}</ThemeContextProvider>
+  )
+  return ThemeProviderContext
+}
+
+export { useTheme }
+
+export { makeTheme } from './utils'

package/src/providers/Theme/interface.ts

@@ -0,0 +1,28 @@
+import type React from 'react'
+
+export type TStyleValue = false | string
+export type TToken = Record<string, string | boolean>
+export type TFunc = (props: TToken) => TStyleValue[] | string
+export type TTheme = { [key: string]: TFunc | TTheme }
+
+export type TStyle = Record<string, TStyleValue>
+export type TCustomTheme = TStyleValue | null | undefined
+export type TStyleCollection = Record<string, TStyle>
+
+export type TDefaultTheme = {
+  typography: (props: TToken) => TStyleValue[] | string
+}
+
+export type TThemeProviderProps<T = TTheme> = {
+  children: React.ReactNode
+  brandTheme?: T
+}
+
+export type TThemePanelContext<T = TTheme> = {
+  brandTheme: T
+}
+
+export interface ITheme {
+  defaultTokens: TToken
+  styles: TStyleCollection
+}

package/src/providers/Theme/utils.ts

@@ -0,0 +1,3 @@
+import type { TTheme } from './interface'
+
+export const makeTheme = (theme: TTheme) => theme

package/src/providers/UserSearchQuery/index.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { createCtx } from '@okam/core-lib'
+import { useMemo, useState } from 'react'
+import type { TSearchListingContext, TSearchProviderProps } from './interface'
+
+export const [useUserQueryValHook, SearchProvider] = createCtx<TSearchListingContext>()
+
+export function SearchBarProvider(props: TSearchProviderProps) {
+  const { userQuery, children } = props
+
+  const [userVal, setUserVal] = useState(userQuery)
+
+  const value = useMemo<TSearchListingContext>(
+    () => ({ userSearchQuery: userVal, setUserSearchQuery: setUserVal }),
+    [userVal, setUserVal],
+  )
+
+  return <SearchProvider value={value}>{children}</SearchProvider>
+}

package/src/providers/UserSearchQuery/interface.ts

@@ -0,0 +1,12 @@
+import type { Dispatch, SetStateAction } from 'react'
+import type React from 'react'
+
+export type TSearchListingContext = {
+  userSearchQuery: string
+  setUserSearchQuery: Dispatch<SetStateAction<string>>
+}
+
+export interface TSearchProviderProps {
+  children: React.ReactNode
+  userQuery: string
+}

package/src/storybook/Lightbox/LightboxControlledState.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react'
+import Button from '../../components/Button'
+import type { TButtonProps } from '../../components/Button/interface'
+import Lightbox from '../../components/Lightbox'
+import type { TLightboxProps } from '../../components/Lightbox/interface'
+
+const LightboxControlledState = (props: TLightboxProps) => {
+  const { children, ...rest } = props
+
+  const [isOpen, setOpen] = useState(false)
+
+  const closeButtonRender = (buttonProps: TButtonProps) => (
+    <Button {...buttonProps} handlePress={() => setOpen(!isOpen)}>
+      Close lightbox
+    </Button>
+  )
+
+  return (
+    <>
+      <Button handlePress={() => setOpen(!isOpen)}>Open lightbox</Button>
+      <Lightbox {...rest} isOpen={isOpen} setOpen={setOpen} closeButton={closeButtonRender}>
+        {children}
+      </Lightbox>
+    </>
+  )
+}
+
+export default LightboxControlledState

package/src/storybook/Menu/Menu.tsx

@@ -0,0 +1,177 @@
+import { Item } from '@react-stately/collections'
+import { isEmpty } from 'radash'
+import type { ComponentType } from 'react'
+import React from 'react'
+import Button, { ButtonWithForwardRef } from '../../components/Button'
+import type { TButtonProps } from '../../components/Button/interface'
+import MenuItems from '../../components/Menu/components/MenuItems'
+import type { TMenuItemProps, TMenuProps, TMenuSidePanelProps } from '../../components/Menu/interface'
+import MenuSidePanel from '../../components/Menu/MenuSidePanel'
+import Typography from '../../components/Typography'
+import { MenuContextProvider, useMenu } from '../../providers/Menu'
+import { useSidePanel } from '../../providers/SidePanel'
+import RenderWithSlide from '../../transitions/RenderWithSlide'
+import { items } from './mock'
+
+export type TSubMenuTab = {
+  key: string
+  title: string
+  childItems?: TMenuItemProps[] | null
+  extra: React.ReactNode | undefined
+}
+
+export type TSubMenuExtraData = {
+  path: string
+  data: React.ReactNode
+}
+
+export const SidePanelControl = () => {
+  const { buttonProps } = useSidePanel()
+
+  return (
+    <ButtonWithForwardRef {...buttonProps?.openButtonProps} ref={buttonProps?.openButtonRef}>
+      Open
+    </ButtonWithForwardRef>
+  )
+}
+
+export const BackBtn = ({ label }: TButtonProps & { label?: string }) => {
+  const { tabState, defaultSelectedKey } = useMenu()
+  const { setSelectedKey } = tabState
+
+  return <Button handlePress={() => setSelectedKey?.(defaultSelectedKey)}>{label}</Button>
+}
+
+export const CloseBtn = () => {
+  const { tabState, defaultSelectedKey } = useMenu()
+  const { buttonProps, overlayState } = useSidePanel()
+  const { closeButtonProps, closeButtonRef } = buttonProps
+  const { isOpen } = overlayState
+
+  const handlePress = (e: React.MouseEvent<HTMLButtonElement>) => {
+    tabState?.setSelectedKey?.(defaultSelectedKey)
+    closeButtonProps?.onClick?.(e)
+  }
+
+  const updatedCloseButtonProps = { ...closeButtonProps, onClick: handlePress }
+
+  return (
+    isOpen && (
+      <ButtonWithForwardRef type="button" {...updatedCloseButtonProps} ref={closeButtonRef} aria-label="CloseButton">
+        Close
+      </ButtonWithForwardRef>
+    )
+  )
+}
+
+export const ShowTab = ({ children }: { children: React.ReactNode }) => (
+  <div>
+    <div>
+      <BackBtn label="SHOWS" />
+      <CloseBtn />
+    </div>
+    <Typography>{children}</Typography>
+  </div>
+)
+
+export const CloseBtnRender = () => <CloseBtn />
+
+export const MenuFactory = ({
+  menuItems,
+  tabs,
+  id,
+  defaultIsOpen,
+  openBtn = null,
+  MenuComponent,
+}: {
+  tabs: JSX.Element[]
+  id: string
+  menuItems?: TMenuItemProps[] | null
+  defaultIsOpen?: boolean
+  openBtn?: React.ReactNode | null
+  MenuComponent: ComponentType<TMenuProps | TMenuSidePanelProps>
+}) => {
+  const { tabState, defaultSelectedKey } = useMenu()
+
+  const handleCloseMenu = () => {
+    if (defaultSelectedKey != null) {
+      tabState?.setSelectedKey?.(defaultSelectedKey)
+    }
+  }
+
+  return (
+    <MenuContextProvider
+      defaultIsOpen={defaultIsOpen}
+      closeBtn={CloseBtnRender}
+      openBtn={SidePanelControl}
+      defaultSelectedKey="empty"
+      onCloseCallback={handleCloseMenu}
+      tabs={tabs}
+    >
+      <>
+        {openBtn}
+        <MenuComponent id={id} TransitionAnimation={RenderWithSlide as (props: unknown) => JSX.Element}>
+          <MenuItems menuItems={menuItems} />
+        </MenuComponent>
+      </>
+    </MenuContextProvider>
+  )
+}
+
+export const menuTabs = (
+  menu: TMenuItemProps[],
+  extras?: TSubMenuExtraData[],
+  MenuComponent: ComponentType<TMenuProps> = MenuSidePanel,
+) => {
+  const tabs: TSubMenuTab[] = [{ key: 'empty', title: 'empty', childItems: null, extra: null }]
+
+  const recursiveFilter = (x: TMenuItemProps) => {
+    if (x.path?.startsWith('#')) {
+      const extra = extras?.find((f) => x.path === f.path)
+      tabs.push({ key: x.path.substring(1), title: x.label ?? x.path, childItems: x.childItems, extra: extra?.data })
+    }
+  }
+
+  menu.forEach(recursiveFilter)
+
+  return tabs.map(({ childItems, key, title }) => {
+    const childTabs = isEmpty(childItems) ? undefined : menuTabs(childItems ?? [], extras, MenuComponent)
+    return (
+      <Item key={key} title={title}>
+        <MenuFactory
+          defaultIsOpen
+          id={`menu-${title}`}
+          tabs={childTabs ?? []}
+          menuItems={childItems}
+          MenuComponent={MenuComponent}
+        />
+      </Item>
+    )
+  })
+}
+
+const MenuContent = () => {
+  const extras: TSubMenuExtraData[] = [
+    {
+      path: '#shows',
+      data: (
+        <ShowTab>
+          <div>Hello World</div>
+        </ShowTab>
+      ),
+    },
+  ]
+  const tabs = menuTabs(items, extras)
+
+  return (
+    <MenuFactory
+      MenuComponent={MenuSidePanel}
+      openBtn={<SidePanelControl />}
+      id="main-menu"
+      tabs={tabs}
+      menuItems={items}
+    />
+  )
+}
+
+export default MenuContent

package/src/storybook/Menu/NestedMenu.tsx

@@ -0,0 +1,24 @@
+import Menu from '../../components/Menu/Menu'
+import type { TSubMenuExtraData } from './Menu'
+import { ShowTab, menuTabs, MenuFactory, SidePanelControl } from './Menu'
+import { items } from './mock'
+
+const MenuContent = () => {
+  const extras: TSubMenuExtraData[] = [
+    {
+      path: '#shows',
+      data: (
+        <ShowTab>
+          <div>Hello World</div>
+        </ShowTab>
+      ),
+    },
+  ]
+  const tabs = menuTabs(items, extras, Menu)
+
+  return (
+    <MenuFactory MenuComponent={Menu} openBtn={<SidePanelControl />} id="main-menu" tabs={tabs} menuItems={items} />
+  )
+}
+
+export default MenuContent

package/src/storybook/Menu/mock.tsx

@@ -0,0 +1,84 @@
+import type { TMenuItemProps } from '../../components/Menu/interface'
+
+export const items: TMenuItemProps[] = [
+  {
+    id: '1',
+    target: null,
+    path: '#shows',
+    label: 'Open 2nd Level Menu Label',
+    children: <div>Open 2nd Level Menu</div>,
+    ariaLabel: 'Open 2nd Level Menu Aria',
+    childItems: [
+      {
+        id: 'abc',
+        target: null,
+        path: '/',
+        label: '2nd level link',
+      },
+      {
+        id: '7',
+        target: null,
+        path: '#subPanel1',
+        label: 'Open 3rd Level Menu',
+        childItems: [
+          {
+            id: '8',
+            target: null,
+            path: '/',
+            label: '3rd level link',
+          },
+          {
+            id: '9',
+            target: null,
+            path: '#subPanel2',
+            label: 'Open 4th Level Menu',
+            childItems: [
+              {
+                id: '10',
+                target: null,
+                path: '/',
+                label: '4th level link',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '8',
+    target: null,
+    path: '#brands',
+    label: 'Brands',
+  },
+  {
+    id: '2',
+    target: null,
+    path: '/',
+    label: 'Today’s Lede Stories',
+  },
+  {
+    id: '3',
+    target: null,
+    path: '/',
+    label: 'News',
+  },
+  {
+    id: '4',
+    target: null,
+    path: '/',
+    label: 'Trailers and screeners',
+  },
+  {
+    id: '5',
+    target: null,
+    path: '/',
+    label: 'Team',
+  },
+  {
+    id: '6',
+    target: null,
+    path: '#search',
+    label: 'Search the lede',
+  },
+]

package/src/storybook/SelectField/index.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import Select from '../../components/fields/Select/Select'
+import type { TSelectProps } from '../../components/fields/Select/Select.interface'
+
+const SelectContent = ({
+  disabled = false,
+  isError = false,
+  errorMessage,
+  id,
+  label,
+  name,
+  placeholderLabel,
+  ...rest
+}: TSelectProps) => {
+  const [value, setValue] = useState<string>()
+
+  return (
+    <>
+      <button type="button" onClick={() => setValue('1')}>
+        1
+      </button>
+      <button type="button" onClick={() => setValue('2')}>
+        2
+      </button>
+      <button type="button" onClick={() => setValue('3')}>
+        3
+      </button>
+      <button type="button" onClick={() => setValue('4')}>
+        4
+      </button>
+      <Select
+        id={id}
+        label={label}
+        name={name}
+        placeholderLabel={placeholderLabel}
+        disabled={disabled}
+        isError={isError}
+        errorMessage={errorMessage}
+        {...rest}
+        onSelectionChange={(key) => {
+          setValue(key.toString())
+          // eslint-disable-next-line no-console
+          console.log('selection changed')
+        }}
+        value={value}
+        options={[
+          { key: '1', value: 'Option 1' },
+          { key: '2', value: 'Option 2' },
+          { key: '3', value: 'Option 3' },
+          { key: '4', value: 'Option 4' },
+        ]}
+      />
+    </>
+  )
+}
+
+export default SelectContent

package/src/storybook/ShareButtonExample/index.tsx

@@ -0,0 +1,66 @@
+import { useCopyToClipboard } from 'usehooks-ts'
+import LinkedIn from '../../components/icons/LinkedIn'
+import ShareButton from '../../components/ShareButton'
+import type { TShareButtonProps } from '../../components/ShareButton/interface'
+import Typography from '../../components/Typography'
+
+const ShareButtonExample = (props: TShareButtonProps) => {
+  const { tokens } = props
+  const [value, copy] = useCopyToClipboard()
+  return (
+    <>
+      <ShareButton
+        id="share"
+        ariaLabel="Share"
+        tokens={tokens}
+        sharingLinksList={[
+          {
+            ariaLabel: 'Share on Facebook',
+            icon: 'FacebookRounded',
+            key: 'facebook',
+            href: '#',
+          },
+          {
+            ariaLabel: 'Share on Twitter',
+            icon: 'Twitter',
+            key: 'twitter',
+            href: '#',
+          },
+          {
+            ariaLabel: 'Share on Instagram',
+            icon: 'Instagram',
+            key: 'instagram',
+            href: '#',
+          },
+          {
+            ariaLabel: 'Share on YouTube',
+            icon: 'YouTube',
+            key: 'youtube',
+            href: '#',
+          },
+          {
+            ariaLabel: 'Share on X',
+            icon: 'X',
+            key: 'x',
+            href: '#',
+          },
+          {
+            ariaLabel: 'Share on LinkedIn',
+            icon: <LinkedIn />,
+            key: 'linkedin',
+            href: '#',
+          },
+          {
+            ariaLabel: 'Copy to clipboard',
+            icon: 'ArrowDown',
+            key: 'copy',
+            onClick: (linkKey) => copy(linkKey),
+          },
+        ]}
+      />
+      <Typography>{value ? `Copied value: ${value}` : 'Nothing copied yet!'}</Typography>
+    </>
+  )
+}
+
+export default ShareButtonExample

package/src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;