@okam/stack-ui 1.25.3 → 1.25.4

package/src/components/Alerts/interface.ts

@@ -1,51 +0,0 @@
-import type React from 'react'
-import type * as SwiperModules from 'swiper/modules'
-import type { SwiperProps } from 'swiper/react'
-import type { A11yOptions } from 'swiper/types'
-import type { TDefaultComponent } from '../../types/components'
-import type { TButtonProps } from '../Button/interface'
-import type { LightboxProps } from '../Lightbox/interface'
-
-type TAlertsNavigationProps = React.ForwardRefExoticComponent<
-  TButtonProps & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>
->
-
-export interface TAlertsItem {
-  id: string
-  icon?: React.ReactNode
-  title?: string
-  ariaLabel?: string
-  content?: React.ReactNode
-  button?: TButtonProps
-}
-
-export interface TAlertsPaginationProps extends TDefaultComponent {
-  activeIndex: number
-  alerts: TAlertsItem[]
-  paginationGroupLabel?: string
-}
-
-export interface TAlertsPaginationBulletProps extends TDefaultComponent {
-  activeIndex: number
-  alerts: TAlertsItem[]
-  index: number
-}
-interface TCustomA11yOptions extends A11yOptions {
-  paginationGroupLabel?: string
-}
-
-export interface TAlertsComponentProps
-  extends Omit<TDefaultComponent, 'children'>,
-    Omit<SwiperProps, 'children' | 'modules' | 'a11y'> {
-  a11y?: TCustomA11yOptions
-  alerts: TAlertsItem[]
-  children?: (props: TAlertsItemProps) => React.ReactNode
-  modules?: (keyof typeof SwiperModules)[]
-}
-
-export type TAlertsItemProps = TAlertsItem & TDefaultComponent
-
-export interface TAlertsProps extends Omit<LightboxProps, 'children'>, TAlertsComponentProps {
-  prevButton?: TAlertsNavigationProps
-  nextButton?: TAlertsNavigationProps
-}

package/src/components/Box/box.stories.mdx

@@ -1,27 +0,0 @@
-{/* box.stories.mdx */}
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import Box from './index'
-
-<Meta title="BASE COMPONENTS/Box" component={Box} />
-
-export const Template = (args) => (
-  <div className="bg-slate-200 p-4">
-    <Box {...args}>Hello world!</Box>
-  </div>
-)
-
-# Box
-
-Box component. Generic wrapper for your website or app.
-
-<Canvas>
-  <Story
-    name="Box"
-    args={{
-      as: 'div',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>

package/src/components/Box/index.tsx

@@ -1,36 +0,0 @@
-'use client'
-
-/* eslint-disable react/display-name */
-import React from 'react'
-import useThemeContext from '../../providers/Theme/hooks'
-import type { TBoxProps } from './interface'
-
-const Box = ({
-  as: Component = 'div',
-  themeName = 'box',
-  tokens,
-  customTheme,
-  children,
-  className,
-  ...rest
-}: TBoxProps) => {
-  const theme = useThemeContext(themeName, tokens, customTheme)
-
-  return (
-    <Component {...rest} className={theme}>
-      {children}
-    </Component>
-  )
-}
-
-export const BoxWithForwardRef = React.forwardRef((props: TBoxProps, ref: React.Ref<HTMLElement>) => {
-  const { as: Component = 'div', tokens, themeName = 'box', customTheme, children, ...rest } = props
-  const theme = useThemeContext(themeName, tokens, customTheme)
-  return (
-    <Component {...rest} ref={ref} className={theme}>
-      {children}
-    </Component>
-  )
-})
-
-export default Box

package/src/components/Box/interface.ts

@@ -1,10 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type React from 'react'
-import type { TToken } from '../../providers/Theme/interface'
-import type { TDefaultComponent } from '../../types/components'
-
-export interface TBoxProps<T = TToken> extends TDefaultComponent<T> {
-  className?: string
-  children?: React.ReactNode
-  dangerouslySetInnerHTML?: { __html: string | TrustedHTML }
-}

package/src/components/Button/button.stories.mdx

@@ -1,99 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import Button from './'
-import Icon from '../Icon'
-
-<Meta
-  title="BASE COMPONENTS/Button"
-  component={Button}
-  args={{
-    as: 'button',
-    disabled: false,
-  }}
-/>
-
-export const Template = (args) => <Button {...args}>Button</Button>
-
-export const IconButton = (args) => (
-  <Button {...args}>
-    <span>Button</span>
-    <Icon icon="ArrowRight" />
-  </Button>
-)
-
-# Button
-
-Button component. You can pass `shape`, `size` and `buttonStyle` into the `tokens` object to change the style.
-You can use property `as` to render the button with a different component, e.g. `button` to `a` if its a link.
-
-<Canvas>
-  <Story name="Primary" args={{}}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    name="Large"
-    args={{
-      tokens: {
-        size: 'large',
-        shape: 'circular',
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    name="Rounded"
-    args={{
-      tokens: {
-        shape: 'rounded',
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    name="Outline"
-    args={{
-      tokens: {
-        buttonStyle: 'outline',
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    name="Hollow"
-    args={{
-      tokens: {
-        buttonStyle: 'hollow',
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    name="Icon"
-    args={{
-      tokens: {
-        buttonStyle: 'outline',
-        intent: 'error',
-      },
-    }}
-  >
-    {IconButton.bind({})}
-  </Story>
-</Canvas>

package/src/components/Button/index.tsx

@@ -1,92 +0,0 @@
-/* eslint-disable react/display-name */
-
-'use client'
-
-import type { RefObject } from 'react'
-import React, { useRef } from 'react'
-import { FocusRing, useButton, useLink } from 'react-aria'
-import useThemeContext from '../../providers/Theme/hooks'
-import type { TAnchorPropsProps, TButtonProps } from './interface'
-
-export const Anchor = React.forwardRef(
-  (props: TAnchorPropsProps, forwardRef: React.Ref<HTMLButtonElement & HTMLAnchorElement>) => {
-    const {
-      as: Component = 'a',
-      handlePress,
-      children,
-      as,
-      customTheme,
-      tokens,
-      themeName = 'button',
-      nextLinkProps,
-      ...rest
-    } = props
-
-    const ref = forwardRef
-    const { linkProps } = useLink(
-      {
-        ...{ ...props, ...nextLinkProps },
-        href: props.href ?? nextLinkProps?.href?.toString(),
-        elementType: as?.toString(),
-        onPress: handlePress,
-      },
-      (forwardRef as RefObject<HTMLElement>) ?? ref,
-    )
-
-    const theme = useThemeContext(themeName, tokens, customTheme)
-
-    return (
-      <FocusRing focusRingClass="has-focus-ring">
-        <Component ref={ref} {...linkProps} {...nextLinkProps} {...rest} className={theme}>
-          {children}
-        </Component>
-      </FocusRing>
-    )
-  },
-)
-
-const Button = React.forwardRef((props: TButtonProps, forwardRef: React.Ref<HTMLButtonElement & HTMLAnchorElement>) => {
-  const {
-    as: Component = 'button',
-    handlePress,
-    children,
-    as,
-    customTheme,
-    tokens,
-    themeName = 'button',
-    isDisabled = false,
-    ...rest
-  } = props
-  const ref = forwardRef
-  const { buttonProps } = useButton(
-    { ...props, isDisabled, elementType: as, onPress: handlePress },
-    (forwardRef as RefObject<HTMLElement>) ?? ref,
-  )
-
-  const theme = useThemeContext(themeName, tokens, customTheme)
-
-  return (
-    <FocusRing within focusRingClass="has-focus-ring">
-      <Component ref={ref} {...buttonProps} {...rest} className={theme}>
-        {children}
-      </Component>
-    </FocusRing>
-  )
-})
-
-export const ButtonWithForwardRef = React.forwardRef(
-  (props: TButtonProps, ref: React.Ref<HTMLButtonElement & HTMLAnchorElement>) => {
-    const { as } = props
-    if (as === 'a') return <Anchor ref={ref} {...props} />
-    return <Button ref={ref} {...props} />
-  },
-)
-
-const ButtonComponent = (props: TButtonProps) => {
-  const { as } = props
-  const ref = useRef(null)
-  if (as === 'a') return <Anchor ref={ref} {...props} />
-  return <Button ref={ref} {...props} />
-}
-
-export default React.memo(ButtonComponent)

package/src/components/Button/interface.ts

@@ -1,22 +0,0 @@
-import type { PressEvent } from '@react-types/shared'
-import type { LinkProps } from 'next/link'
-import type React from 'react'
-import type { TDefaultComponent } from '../../types/components'
-
-export interface TButtonProps extends TDefaultComponent {
-  children?: React.ReactNode
-  id?: string
-  href?: string
-  disabled?: boolean
-  download?: boolean
-  target?: string
-  rel?: string
-  handlePress?: ((e: PressEvent) => void) | undefined
-  tabIndex?: number
-  role?: string
-  isDisabled?: boolean
-}
-
-export interface TAnchorPropsProps extends TButtonProps {
-  nextLinkProps?: LinkProps
-}

package/src/components/Calendar/RangeCalendar.tsx

@@ -1,61 +0,0 @@
-/* eslint-disable no-unused-vars */
-import { createCalendar } from '@internationalized/date'
-import { useRangeCalendar } from '@react-aria/calendar'
-import { useLocale } from '@react-aria/i18n'
-import { useRangeCalendarState } from '@react-stately/calendar'
-import { useRef } from 'react'
-import useThemeContext from '../../providers/Theme/hooks'
-import Button from '../Button'
-import Icon from '../Icon'
-import Typography from '../Typography'
-import CalendarGrid from './components/CalendarGrid'
-import type { TRangeCalendarProps } from './interface'
-
-function RangeCalendar({ buttons, tokens, customTheme, themeName = 'calendar', ...rest }: TRangeCalendarProps) {
-  const { locale } = useLocale()
-  const state = useRangeCalendarState({
-    ...rest,
-    locale,
-    createCalendar,
-  })
-
-  const ref = useRef(null)
-  const { calendarProps, prevButtonProps, nextButtonProps, title } = useRangeCalendar({ ...rest }, state, ref)
-
-  const containerTheme = useThemeContext(`${themeName}.container`, tokens)
-  const headerTheme = useThemeContext(`${themeName}.header`, tokens)
-  const navigationButtonsContainer = useThemeContext(`${themeName}.navigationButtonsContainer`, tokens)
-
-  return (
-    <div {...calendarProps} ref={ref} className={containerTheme}>
-      <div className={headerTheme}>
-        <Typography as="p" tokens={{ size: 'h6' }}>
-          {title}
-        </Typography>
-        <div className={navigationButtonsContainer}>
-          <Button
-            themeName={`${themeName}.navigationButtons`}
-            tokens={{ ...tokens }}
-            type="button"
-            {...prevButtonProps}
-            handlePress={prevButtonProps?.onPress}
-          >
-            <Icon icon={buttons?.buttonPrev?.icon ?? 'ArrowLeft'} />
-          </Button>
-          <Button
-            themeName={`${themeName}.navigationButtons`}
-            tokens={{ ...tokens }}
-            type="button"
-            {...nextButtonProps}
-            handlePress={nextButtonProps?.onPress}
-          >
-            <Icon icon={buttons?.buttonNext?.icon ?? 'ArrowRight'} />
-          </Button>
-        </div>
-      </div>
-      <CalendarGrid state={state} />
-    </div>
-  )
-}
-
-export default RangeCalendar

package/src/components/Calendar/calendar.stories.mdx

@@ -1,28 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import Calendar from './'
-import RangeCalendar from './RangeCalendar'
-import { OverlayContainer } from '@react-aria/overlays'
-
-<Meta
-  title="Base Components/Calendar"
-  component={Calendar}
-  args={{
-    label: 'Filter by date',
-    variant: 'primary',
-  }}
-/>
-
-export const CalendarTemplate = (args) => <Calendar {...args} />
-export const RangeCalendarTemplate = (args) => <RangeCalendar {...args} />
-
-# Calendar
-
-Calendar component.
-
-<Canvas>
-  <Story name="Calendar">{CalendarTemplate.bind({})}</Story>
-</Canvas>
-
-<Canvas>
-  <Story name="Range Calendar">{RangeCalendarTemplate.bind({})}</Story>
-</Canvas>

package/src/components/Calendar/components/CalendarCell.tsx

@@ -1,60 +0,0 @@
-import { isSameDay, getDayOfWeek } from '@internationalized/date'
-import { useCalendarCell } from '@react-aria/calendar'
-import { useFocusRing } from '@react-aria/focus'
-import { mergeProps } from '@react-aria/utils'
-import type { RangeCalendarState } from '@react-stately/calendar'
-import { useRef } from 'react'
-import { useLocale } from 'react-aria'
-import useThemeContext from '../../../providers/Theme/hooks'
-import type { TCalendarCellProps } from '../interface'
-
-function CalendarCell({ themeName = 'calendar', tokens, state, date }: TCalendarCellProps) {
-  const ref = useRef(null)
-  const { cellProps, buttonProps, isSelected, isOutsideVisibleRange, isDisabled, formattedDate, isInvalid } =
-    useCalendarCell({ date }, state, ref)
-
-  // The start and end date of the selected range will have
-  // an emphasized appearance.
-  const isSelectionStart = (state as RangeCalendarState)?.highlightedRange
-    ? isSameDay(date, (state as RangeCalendarState)?.highlightedRange.start)
-    : isSelected
-  const isSelectionEnd = (state as RangeCalendarState)?.highlightedRange
-    ? isSameDay(date, (state as RangeCalendarState)?.highlightedRange.end)
-    : isSelected
-
-  const { locale } = useLocale()
-  const dayOfWeek = getDayOfWeek(date, locale)
-  const isRoundedLeft = isSelected && (isSelectionStart || dayOfWeek === 0 || date.day === 1)
-  const isRoundedRight =
-    isSelected && (isSelectionEnd || dayOfWeek === 6 || date.day === date.calendar.getDaysInMonth(date))
-
-  const { focusProps, isFocusVisible } = useFocusRing()
-
-  const cellContainerTheme = useThemeContext(`${themeName}.cellContainer`, { ...tokens, isFocusVisible })
-  const cellTheme = useThemeContext(`${themeName}.cell`, {
-    ...tokens,
-    isSelected,
-    isInvalid,
-    isDisabled,
-    isRoundedLeft,
-    isRoundedRight,
-  })
-  const cellDate = useThemeContext(`${themeName}.cellDate`, {
-    ...tokens,
-    isSelected,
-    isInvalid,
-    isDisabled,
-    isSelectionStart,
-    isSelectionEnd,
-  })
-
-  return (
-    <td {...cellProps} aria-disabled={false} className={cellContainerTheme}>
-      <div {...mergeProps(buttonProps, focusProps)} ref={ref} hidden={isOutsideVisibleRange} className={cellTheme}>
-        <div className={cellDate}>{formattedDate}</div>
-      </div>
-    </td>
-  )
-}
-
-export default CalendarCell

package/src/components/Calendar/components/CalendarGrid.tsx

@@ -1,44 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-/* eslint-disable no-unused-vars */
-import { getWeeksInMonth } from '@internationalized/date'
-import { useCalendarGrid } from '@react-aria/calendar'
-import { useLocale } from '@react-aria/i18n'
-import useThemeContext from '../../../providers/Theme/hooks'
-import type { TCalendarGridProps } from '../interface'
-import CalendarCell from './CalendarCell'
-
-function CalendarGrid({ themeName = 'calendar', customTheme, tokens, state, ...rest }: TCalendarGridProps) {
-  const { locale } = useLocale()
-  const { gridProps, headerProps, weekDays } = useCalendarGrid({ ...rest }, state)
-
-  // Get the number of weeks in the month so we can render the proper number of rows.
-  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale)
-
-  const tableTheme = useThemeContext(`${themeName}.calendarTable`, tokens)
-  const dayLabelTheme = useThemeContext(`${themeName}.dayLabel`, tokens)
-
-  return (
-    <table {...gridProps} cellPadding="0" className={tableTheme}>
-      <thead {...headerProps}>
-        <tr>
-          {weekDays.map((day) => (
-            <th key={`${day}`} className={dayLabelTheme}>
-              {day}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {[...new Array(weeksInMonth).keys()].map((weekIndex) => (
-          <tr key={weekIndex}>
-            {state
-              .getDatesInWeek(weekIndex)
-              .map((date, i) => (date ? <CalendarCell key={date?.day} state={state} date={date} /> : <td key={i} />))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}
-
-export default CalendarGrid

package/src/components/Calendar/index.tsx

@@ -1,63 +0,0 @@
-'use client'
-
-/* eslint-disable no-unused-vars */
-import { createCalendar } from '@internationalized/date'
-import { useCalendar } from '@react-aria/calendar'
-import { useLocale } from '@react-aria/i18n'
-import { useCalendarState } from '@react-stately/calendar'
-import { useRef } from 'react'
-import useThemeContext from '../../providers/Theme/hooks'
-import Button from '../Button'
-import Icon from '../Icon'
-import Typography from '../Typography'
-import CalendarGrid from './components/CalendarGrid'
-import type { TCalendarProps } from './interface'
-
-function Calendar({ buttons, tokens, customTheme, themeName = 'calendar', ...rest }: TCalendarProps) {
-  const { locale } = useLocale()
-  const state = useCalendarState({
-    ...rest,
-    locale,
-    createCalendar,
-  })
-
-  const ref = useRef(null)
-  const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar({ ...rest }, state)
-
-  const containerTheme = useThemeContext(`${themeName}.container`, tokens)
-  const headerTheme = useThemeContext(`${themeName}.header`, tokens)
-  const navigationButtonsContainer = useThemeContext(`${themeName}.navigationButtonsContainer`, tokens)
-
-  return (
-    <div {...calendarProps} ref={ref} className={containerTheme}>
-      <div className={headerTheme}>
-        <Typography as="p" tokens={{ size: 'h6' }}>
-          {title}
-        </Typography>
-        <div className={navigationButtonsContainer}>
-          <Button
-            themeName={`${themeName}.navigationButtons`}
-            tokens={{ ...tokens }}
-            type="button"
-            {...prevButtonProps}
-            handlePress={prevButtonProps?.onPress}
-          >
-            <Icon icon={buttons?.buttonPrev?.icon ?? 'ArrowLeft'} />
-          </Button>
-          <Button
-            themeName={`${themeName}.navigationButtons`}
-            tokens={{ ...tokens }}
-            type="button"
-            {...nextButtonProps}
-            handlePress={nextButtonProps?.onPress}
-          >
-            <Icon icon={buttons?.buttonNext?.icon ?? 'ArrowRight'} />
-          </Button>
-        </div>
-      </div>
-      <CalendarGrid state={state} />
-    </div>
-  )
-}
-
-export default Calendar

package/src/components/Calendar/interface.ts

@@ -1,37 +0,0 @@
-/* eslint-disable no-unused-vars */
-import type { CalendarDate, DateValue } from '@internationalized/date'
-import type { CalendarProps, RangeCalendarProps } from '@react-aria/calendar'
-import type { CalendarState, RangeCalendarState } from '@react-stately/calendar'
-import type { AriaCalendarGridProps } from 'react-aria'
-import type { TDefaultComponent } from '../../types/components'
-
-export interface TCalendarProps extends CalendarProps<DateValue>, TDefaultComponent {
-  buttons?: {
-    buttonPrev?: {
-      icon?: string
-    }
-    buttonNext?: {
-      icon?: string
-    }
-  }
-}
-
-export interface TRangeCalendarProps extends RangeCalendarProps<DateValue>, TDefaultComponent {
-  buttons?: {
-    buttonPrev?: {
-      icon?: string
-    }
-    buttonNext?: {
-      icon?: string
-    }
-  }
-}
-
-export interface TCalendarGridProps extends AriaCalendarGridProps, TDefaultComponent {
-  state: RangeCalendarState | CalendarState
-}
-
-export interface TCalendarCellProps extends TDefaultComponent {
-  state: RangeCalendarState | CalendarState
-  date: CalendarDate
-}