@okam/stack-ui 1.25.3 → 1.25.4

package/src/components/icons/X.tsx

@@ -1,14 +0,0 @@
-import isEqual from 'lodash.isequal'
-import React, { memo } from 'react'
-
-const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={25} viewBox="0 0 24 25" fill="none" {...props}>
-    <path
-      d="M14.119 11.7052L20.4486 4.5H18.9492L13.4509 10.7549L9.0626 4.5H4L10.6374 13.9594L4 21.5142H5.4994L11.3021 14.9074L15.9374 21.5142H21M6.04057 5.60727H8.34407L18.9481 20.4613H16.644"
-      fill="currentColor"
-    />
-  </svg>
-)
-
-const X = memo(SvgComponent, isEqual)
-export default X

package/src/components/icons/YouTube.tsx

@@ -1,16 +0,0 @@
-import isEqual from 'lodash.isequal'
-import React, { memo } from 'react'
-
-const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 256 256" {...props}>
-    <path
-      fill="currentColor"
-      strokeMiterlimit="10"
-      strokeWidth="0"
-      d="M249 67c-3-11-11-19-22-22-20-6-99-6-99-6s-79 0-99 6C18 48 10 56 7 67c-6 20-6 61-6 61s0 41 6 61c3 11 11 19 22 22 20 5 99 5 99 5s79 0 99-5c11-3 19-11 22-22 5-20 5-61 5-61s0-41-5-61zm-146 99V90l65 38-65 38z"
-    />
-  </svg>
-)
-
-const YouTube = memo(SvgComponent, isEqual)
-export default YouTube

package/src/components/icons/YouTubeColored.tsx

@@ -1,17 +0,0 @@
-import isEqual from 'lodash.isequal'
-import React, { memo } from 'react'
-
-const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 256 256" {...props}>
-    <g fill="currentColor" strokeMiterlimit="10" strokeWidth="0">
-      <path
-        fill="red"
-        d="M249.02 66.99a31.68 31.68 0 0 0-22.36-22.36c-19.72-5.29-98.8-5.29-98.8-5.29s-79.09 0-98.8 5.29A31.68 31.68 0 0 0 6.68 66.99c-5.28 19.72-5.28 60.87-5.28 60.87s0 41.15 5.28 60.87a31.68 31.68 0 0 0 22.36 22.36c19.72 5.28 98.8 5.28 98.8 5.28s79.1 0 98.81-5.28a31.68 31.68 0 0 0 22.36-22.36c5.29-19.72 5.29-60.87 5.29-60.87s0-41.15-5.29-60.87z"
-      />
-      <path fill="#fff" d="m102.57 165.8 65.7-37.94-65.7-37.94z" />
-    </g>
-  </svg>
-)
-
-const YouTubeColored = memo(SvgComponent, isEqual)
-export default YouTubeColored

package/src/components/icons/index.ts

@@ -1,24 +0,0 @@
-export { default as ArrowDown } from './ArrowDown'
-export { default as ArrowLeft } from './ArrowLeft'
-export { default as ArrowRight } from './ArrowRight'
-export { default as Check } from './Check'
-export { default as ChevronLeft } from './ChevronLeft'
-export { default as ChevronRight } from './ChevronRight'
-export { default as CloseBtn } from './CloseBtn'
-export { default as Facebook } from './Facebook'
-export { default as FacebookColored } from './FacebookColored'
-export { default as FacebookRounded } from './FacebookRounded'
-export { default as Globe } from './Globe'
-export { default as Instagram } from './Instagram'
-export { default as InstagramColored } from './InstagramColored'
-export { default as Link } from './Link'
-export { default as LinkedIn } from './LinkedIn'
-export { default as Mail } from './Mail'
-export { default as Plus } from './Plus'
-export { default as Share } from './Share'
-export { default as Twitter } from './Twitter'
-export { default as TwitterColored } from './TwitterColored'
-export { default as Upload } from './Upload'
-export { default as X } from './X'
-export { default as YouTube } from './YouTube'
-export { default as YouTubeColored } from './YouTubeColored'

package/src/examples/PageLayout/index.tsx

@@ -1,61 +0,0 @@
-import Box from '../../components/Box'
-import type { TBoxProps } from '../../components/Box/interface'
-import Typography from '../../components/Typography'
-
-const Main = ({ children }: TBoxProps) => {
-  return (
-    <Box as="main" themeName="main">
-      {children}
-    </Box>
-  )
-}
-
-const Container = ({ children, ...props }: TBoxProps) => {
-  return (
-    <Box themeName="container" {...props}>
-      {children}
-    </Box>
-  )
-}
-
-const Grid = ({ children, ...props }: TBoxProps) => {
-  return (
-    <Box themeName="grid" {...props}>
-      {children}
-    </Box>
-  )
-}
-
-const GridItem = ({ children, ...props }: TBoxProps) => {
-  return (
-    <Box as="li" themeName="gridItem" {...props}>
-      {children}
-    </Box>
-  )
-}
-
-const PageLayoutExample = () => (
-  <Main>
-    <Container tokens={{ spacing: 'small' }}>
-      <Typography as="h1" tokens={{ size: 'h1', align: 'center' }}>
-        Hello world
-      </Typography>
-    </Container>
-    <Container tokens={{ spacing: 'large' }}>
-      <Grid as="ul">
-        <GridItem tokens={{ size: 'medium' }}>1</GridItem>
-        <GridItem>2</GridItem>
-        <GridItem>3</GridItem>
-        <GridItem>4</GridItem>
-        <GridItem>5</GridItem>
-      </Grid>
-    </Container>
-    <Container tokens={{ fullWidth: true, className: 'bg-red-200 py-8' }}>
-      <Grid as="ul">
-        <GridItem tokens={{ size: 'large', className: 'h-96' }}>Large</GridItem>
-      </Grid>
-    </Container>
-  </Main>
-)
-
-export default PageLayoutExample

package/src/examples/PageLayout/layout.stories.mdx

@@ -1,35 +0,0 @@
-{/* layout.stories.mdx */}
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import PageLayoutExample from './index'
-
-<Meta title="LAYOUT EXAMPLE/Simple" component={PageLayoutExample} />
-
-export const Template = (args) => (
-  <>
-    <style>
-      {`
-        #storybook-root {
-          width: 100%;
-          padding: 0! important;
-        }
-      `}
-    </style>
-    <PageLayoutExample {...args} />
-  </>
-)
-
-# Box
-
-Box component. Generic wrapper for your website or app.
-
-<Canvas layout="fullscreen">
-  <Story
-    name="Box"
-    args={{
-      as: 'div',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>

package/src/message.tsx

@@ -1,8 +0,0 @@
-import type { FC } from 'react'
-
-type Props = {
-  message: string
-  children?: never
-}
-
-export const Message: FC<Props> = ({ message }) => <span>{message}</span>

package/src/providers/Accordion/index.tsx

@@ -1,15 +0,0 @@
-'use client'
-
-import { createCtxNullable } from '@okam/core-lib'
-import { useMemo } from 'react'
-import type { TAccordionContext, TAccordionProviderProps } from './interface'
-
-export const [useAccordionCtx, AccordionProvider] = createCtxNullable<TAccordionContext>()
-
-export function AccordionContextProvider(props: TAccordionProviderProps) {
-  const { state, children, TransitionAnimation } = props
-
-  const value = useMemo<TAccordionContext>(() => ({ state, TransitionAnimation }), [state, TransitionAnimation])
-
-  return <AccordionProvider value={value}>{children}</AccordionProvider>
-}

package/src/providers/Accordion/interface.ts

@@ -1,14 +0,0 @@
-import type { ReactNode } from 'react'
-import type { TreeState } from 'react-stately'
-import type { TAccordionItemProps, TAccordionProps } from '../../components/Accordion/interface'
-
-type TAccordion = NonNullable<Pick<TAccordionProps, 'TransitionAnimation'>>
-
-export interface TAccordionProviderProps extends TAccordion {
-  children: ReactNode
-  state: TreeState<TAccordionItemProps>
-}
-
-export type TAccordionContext = TAccordion & {
-  state: TreeState<TAccordionItemProps>
-}

package/src/providers/Alerts/index.tsx

@@ -1,15 +0,0 @@
-'use client'
-
-import { createCtxNullable } from '@okam/core-lib'
-import { useMemo } from 'react'
-import type { TAlertsControllerContext, TAlertsControllerProviderProps } from './interface'
-
-export const [useAlertsController, AlertsControllerProvider] = createCtxNullable<TAlertsControllerContext>()
-
-export function AlertsControllerContextProvider(props: TAlertsControllerProviderProps) {
-  const { controller, children } = props
-
-  const value = useMemo<TAlertsControllerContext>(() => ({ controller }), [controller])
-
-  return <AlertsControllerProvider value={value}>{children}</AlertsControllerProvider>
-}

package/src/providers/Alerts/interface.ts

@@ -1,11 +0,0 @@
-import type { ReactNode } from 'react'
-import type { SwiperClass } from 'swiper/react'
-
-export interface TAlertsControllerProviderProps {
-  children: ReactNode
-  controller: SwiperClass | undefined
-}
-
-export type TAlertsControllerContext = {
-  controller: SwiperClass | undefined
-}

package/src/providers/CheckboxGroup/index.tsx

@@ -1,22 +0,0 @@
-'use client'
-
-import type { CheckboxGroupState } from '@react-stately/checkbox'
-import { createContext, useContext } from 'react'
-import type { TCheckboxGroupContext } from './interface'
-
-const CheckboxGroupContext = createContext<CheckboxGroupState | null>(null)
-
-const CheckboxGroupProvider = (props: TCheckboxGroupContext) => {
-  const { children, state } = props
-
-  return <CheckboxGroupContext.Provider value={state}>{children}</CheckboxGroupContext.Provider>
-}
-
-function useCheckboxGroupCtx() {
-  const context = useContext(CheckboxGroupContext)
-
-  if (!context) return null
-  return context
-}
-
-export { CheckboxGroupProvider, useCheckboxGroupCtx }

package/src/providers/Client/index.tsx

@@ -1,21 +0,0 @@
-'use client'
-
-import { createCtx } from '@okam/core-lib'
-import { useEffect, useMemo, useState } from 'react'
-import type { TClientContext, TClientProps, TClientProviderProps } from './interface'
-
-const [useIsClient, IsClientProvider] = createCtx<TClientProps>()
-
-export { useIsClient }
-
-export function IsClientContextProvider({ children }: TClientProviderProps) {
-  const [isClient, setIsClient] = useState(false)
-
-  useEffect(() => {
-    setIsClient(true)
-  }, [])
-
-  const value = useMemo<TClientContext>(() => ({ isClient }), [isClient])
-
-  return <IsClientProvider value={value}>{children}</IsClientProvider>
-}

package/src/providers/Client/interface.ts

@@ -1,13 +0,0 @@
-import type React from 'react'
-
-export type TClientProviderProps = {
-  children: React.ReactNode
-}
-
-export type TClientProps = {
-  isClient: boolean
-}
-
-export type TClientContext = {
-  isClient: boolean
-}

package/src/providers/Menu/index.tsx

@@ -1,43 +0,0 @@
-'use client'
-
-import { createCtxNullable } from '@okam/core-lib'
-import { useMemo } from 'react'
-import { useTabListState } from 'react-stately'
-import { SidePanelContextProvider } from '../SidePanel'
-import type { IMenuProviderProps, TMenuContext } from './interface'
-
-export const [useMenu, MenuProvider] = createCtxNullable<TMenuContext>()
-
-export function MenuContextProvider({
-  children,
-  defaultSelectedKey,
-  defaultIsOpen,
-  onCloseCallback,
-  onOpenCallback,
-  tabs,
-  openBtn,
-  closeBtn,
-  ...rest
-}: IMenuProviderProps) {
-  const tabState = useTabListState({ ...rest, children: tabs, defaultSelectedKey })
-  const value = useMemo<TMenuContext>(
-    () => ({ openBtn, closeBtn, tabState, defaultSelectedKey }),
-    [openBtn, closeBtn, tabState, defaultSelectedKey],
-  )
-
-  return (
-    <MenuProvider value={value}>
-      <SidePanelContextProvider
-        onCloseCallback={() => {
-          onCloseCallback?.()
-          tabState?.setSelectedKey?.(defaultSelectedKey)
-        }}
-        onOpenCallback={onOpenCallback}
-        defaultIsOpen={defaultIsOpen}
-        defaultSelectedKey={defaultSelectedKey.toString()}
-      >
-        {children}
-      </SidePanelContextProvider>
-    </MenuProvider>
-  )
-}

package/src/providers/Menu/interface.ts

@@ -1,32 +0,0 @@
-import type { CollectionChildren } from '@react-types/shared'
-import type React from 'react'
-import type { AriaTabListProps } from 'react-aria'
-import type { TabListState } from 'react-stately'
-
-export type TMenuProviderProps = {
-  children: React.ReactNode
-  tabs?: CollectionChildren<object>
-  defaultSelectedKey: string
-  defaultIsOpen?: boolean
-  onCloseCallback?: () => void
-  onOpenCallback?: () => void
-  openBtn?: () => JSX.Element
-  closeBtn?: () => JSX.Element
-  secondaryOpenBtn?: () => JSX.Element
-}
-
-export type IMenuProviderProps = AriaTabListProps<TMenuProviderProps> & TMenuProviderProps
-
-export type TMenuContext = {
-  openBtn?: () => JSX.Element
-  closeBtn?: () => JSX.Element
-  secondaryOpenBtn?: () => JSX.Element
-  tabState: TabListState<object>
-  defaultSelectedKey: string
-}
-
-export type TMenuProps = {
-  openBtn?: () => JSX.Element
-  closeBtn?: () => JSX.Element
-  secondaryOpenBtn?: () => JSX.Element
-}

package/src/providers/RadioGroup/RadioGroup.interface.ts

@@ -1,8 +0,0 @@
-import type { RadioGroupProps } from '@react-types/radio'
-import type { ReactNode } from 'react'
-import type { RadioGroupState } from 'react-stately'
-
-export interface TRadioGroupContext extends RadioGroupProps {
-  children: ReactNode
-  state: RadioGroupState
-}

package/src/providers/RadioGroup/RadioGroup.tsx

@@ -1,25 +0,0 @@
-'use client'
-
-import type { RadioGroupState } from '@react-stately/radio'
-import { createContext, useContext } from 'react'
-import type { TRadioGroupContext } from './RadioGroup.interface'
-
-const RadioGroupContext = createContext<RadioGroupState | null>(null)
-
-const RadioGroupProvider = (props: TRadioGroupContext) => {
-  const { children, state } = props
-
-  return <RadioGroupContext.Provider value={state}>{children}</RadioGroupContext.Provider>
-}
-
-function useRadioGroupCtx() {
-  const context = useContext(RadioGroupContext)
-
-  if (context !== null) {
-    return context
-  }
-
-  return null
-}
-
-export { RadioGroupProvider, useRadioGroupCtx }

package/src/providers/SidePanel/index.tsx

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

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

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

@@ -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