@okam/stack-ui 1.25.2 → 1.25.3

package/src/components/Alerts/interface.ts

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

@@ -0,0 +1,27 @@
+{/* 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

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

@@ -0,0 +1,10 @@
+/* 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

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

@@ -0,0 +1,92 @@
+/* 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

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

@@ -0,0 +1,61 @@
+/* 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

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

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

@@ -0,0 +1,44 @@
+/* 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

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

@@ -0,0 +1,37 @@
+/* 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
+}