@okam/stack-ui 1.25.3 → 1.25.6

package/src/providers/Theme/index.tsx

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

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

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

package/src/providers/UserSearchQuery/index.tsx

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

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

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

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

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

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

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

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

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

package/src/theme/Accordion/index.tsx

@@ -1,101 +0,0 @@
-import { tv } from 'tailwind-variants'
-import type { TToken } from '../../providers/Theme/interface'
-
-export const accordionContainer = tv({
-  base: '[border-radius: 32px] p-1.5 focus:outline-none text-color-1-500',
-  defaultVariants: {
-    textAlign: 'left',
-    isOpen: false,
-  },
-  variants: {
-    textAlign: {
-      center: 'text-center',
-      left: 'text-left',
-    },
-  },
-})
-
-export const accordionButton = tv({
-  base: 'grid overflow-hidden w-full items-center border-b-2 border-color-1-500 focus-ring-black',
-  variants: {
-    titleBold: {
-      true: 'font-bold',
-    },
-    textAlign: {
-      center: 'grid-cols-[3rem_1fr_3rem] pl-0 sm:pl-0',
-      left: 'grid-cols-[1fr_3rem]',
-    },
-    bgColor: {
-      gray: 'bg-gray-300',
-      white: 'bg-white',
-    },
-  },
-  defaultVariants: {
-    titleBold: false,
-    textAlign: 'left',
-    bgColor: 'white',
-  },
-})
-
-export const accordionTitle = tv({
-  base: '',
-  defaultVariants: {
-    textAlign: 'left',
-  },
-  variants: {
-    textAlign: {
-      center: 'justify-self-center col-start-2',
-      left: 'justify-self-start',
-    },
-  },
-})
-
-export const accordionIcon = tv({
-  base: 'text-color-1-500 min-h-12 rotate-90 min-w-12 rounded-full flex items-center justify-center transition duration-500 transform ml-auto aspect-square',
-  variants: {
-    isOpen: {
-      true: '-rotate-90',
-      false: '',
-    },
-  },
-})
-
-export const accordionRegion = tv({
-  base: `
-    font-body 
-    text-inherit
-    h-auto
-    grid
-  `,
-  defaultVariants: {
-    textAlign: 'left',
-  },
-  variants: {
-    textAlign: {
-      center: 'grid-cols-[3rem_1fr_3rem] px-6 text-center',
-      left: 'grid-cols-[1fr_3rem] text-left',
-    },
-  },
-})
-
-export const accordionContent = tv({
-  base: 'overflow-hidden flex flex-col gap-2 items-start',
-  defaultVariants: {
-    textAlign: 'left',
-  },
-  variants: {
-    textAlign: {
-      center: 'col-start-2',
-      left: '',
-    },
-  },
-})
-
-export const accordionTheme = {
-  container: (props: TToken) => accordionContainer(props),
-  button: (props: TToken) => accordionButton(props),
-  title: (props: TToken) => accordionTitle(props),
-  icon: (props: TToken) => accordionIcon(props),
-  region: (props: TToken) => accordionRegion(props),
-  content: (props: TToken) => accordionContent(props),
-}