@okam/stack-ui 1.25.3 → 1.25.4

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),
-}

package/src/theme/Alerts/index.ts

@@ -1,97 +0,0 @@
-import { tv } from 'tailwind-variants'
-import button from '../Button'
-import typography from '../Typography'
-
-const alertsWrapper = tv({
-  base: 'bg-color-1-200 p-4 flex flex-col gap-4',
-})
-
-const alertsContainer = tv({
-  base: 'flex justify-between items-center gap-4 relative',
-})
-
-const alertsCloseBtn = tv({
-  extend: button,
-  base: 'self-end',
-})
-
-const alertsSwiperSwiper = tv({
-  base: 'bg-color-1-300 m-2 rounded-lg order-2',
-})
-
-const alertsSwiperWrapper = tv({
-  base: 'm-4',
-})
-
-const alertsItemWrapper = tv({
-  base: '',
-})
-
-const alertsItemContainer = tv({
-  base: '',
-})
-
-const alertsItemTitle = tv({
-  extend: typography,
-  defaultVariants: {
-    size: 'h1',
-  },
-})
-
-const alertsItemContent = tv({
-  extend: typography,
-})
-
-const alertsItemIcon = tv({
-  base: 'block w-min bg-color-1-400 p-2 rounded-lg',
-})
-
-const alertsNavigationButton = tv({
-  extend: button,
-  variants: {
-    order: {
-      prev: 'order-1',
-      next: 'order-3',
-    },
-  },
-})
-
-const alertsPaginationWrapper = tv({
-  base: 'flex gap-4 justify-center absolute z-10 bottom-4 left-0 right-0',
-})
-
-const alertsPaginationBullet = tv({
-  base: 'w-4 h-4 rounded-full block bg-color-1-600 focus-ring-black',
-  variants: {
-    active: {
-      true: 'bg-color-1-100',
-      false: '',
-    },
-  },
-})
-
-const alertsTheme = {
-  wrapper: alertsWrapper,
-  container: alertsContainer,
-  closeBtn: alertsCloseBtn,
-  swiper: {
-    swiper: alertsSwiperSwiper,
-    wrapper: alertsSwiperWrapper,
-  },
-  item: {
-    wrapper: alertsItemWrapper,
-    container: alertsItemContainer,
-    title: alertsItemTitle,
-    content: alertsItemContent,
-    icon: alertsItemIcon,
-  },
-  navigation: {
-    button: alertsNavigationButton,
-  },
-  pagination: {
-    wrapper: alertsPaginationWrapper,
-    bullet: alertsPaginationBullet,
-  },
-}
-
-export default alertsTheme

package/src/theme/Box/index.ts

@@ -1,45 +0,0 @@
-import { tv } from 'tailwind-variants'
-
-export const main = tv({
-  base: 'w-full bg-slate-100',
-})
-
-export const container = tv({
-  base: 'max-w-screen-lg mx-auto w-full',
-  variants: {
-    fullWidth: {
-      true: 'max-w-full col-span-full p-0',
-    },
-    spacing: {
-      small: 'mb-3',
-      medium: 'mb-6',
-      large: 'mb-8',
-      none: 'mb-0',
-    },
-  },
-})
-
-export const grid = tv({
-  extend: container,
-  base: 'grid grid-cols-12 gap-6 px-4 col-span-full',
-  variants: {
-    fullWidth: {
-      true: 'max-w-full col-span-full p-0',
-    },
-  },
-})
-
-export const gridItem = tv({
-  base: 'bg-slate-300 h-64 p-4 flex justify-start items-end',
-  defaultVariants: {
-    size: 'small',
-  },
-  variants: {
-    size: {
-      small: 'col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4',
-      medium: 'col-span-12 sm:col-span-12 md:col-span-8 lg:col-span-8',
-      large:
-        'lg:col-start-3 sm:col-start-1 sm:col-end-13 lg:col-end-11 md:col-start-3 md:col-end-11 col-start-1 col-end-13',
-    },
-  },
-})