@okam/stack-ui 1.25.3 → 1.25.6

package/src/components/fields/CheckboxGroup/components/CheckboxGroupItem/index.tsx

@@ -1,66 +0,0 @@
-'use client'
-
-import { useRef } from 'react'
-import { FocusRing, VisuallyHidden, useCheckboxGroupItem } from 'react-aria'
-import type { CheckboxGroupState } from 'react-stately'
-import { useCheckboxGroupCtx } from '../../../../../providers/CheckboxGroup'
-import useThemeContext from '../../../../../providers/Theme/hooks'
-import Icon from '../../../../Icon'
-import Typography from '../../../../Typography'
-import type { TCheckboxGroupItemProps } from '../../interface'
-
-const ContextCheckboxGroupItem = (props: TCheckboxGroupItemProps & { state: CheckboxGroupState }) => {
-  const {
-    id,
-    ariaLabel,
-    icon,
-    state,
-    themeName = 'checkbox',
-    customTheme,
-    tokens,
-    isDisabled = false,
-    isError = false,
-    value,
-    errorMessage,
-    label,
-  } = props
-  const ref = useRef(null)
-  const { inputProps } = useCheckboxGroupItem(props, state, ref)
-  const { isSelected } = state
-
-  const checkBoxTokens = { ...tokens, selected: isSelected(value), isDisabled, isError }
-  const checkBoxContainerTheme = useThemeContext(`${themeName}.container`, checkBoxTokens, customTheme)
-  const checkBoxTheme = useThemeContext(`${themeName}.checkBox`, checkBoxTokens, customTheme)
-  const checkMarkTheme = useThemeContext(`${themeName}.checkMark`, checkBoxTokens, customTheme)
-  const checkMarkIconTheme = useThemeContext(`${themeName}.checkMarkIcon`, checkBoxTokens, customTheme)
-
-  return (
-    <div>
-      <FocusRing focusRingClass="has-focus-ring" within>
-        <label className={checkBoxContainerTheme} htmlFor={id} aria-label={ariaLabel} aria-disabled={isDisabled}>
-          <VisuallyHidden>
-            <input ref={ref} {...inputProps} />
-          </VisuallyHidden>
-          <div className={checkBoxTheme} aria-checked={isSelected(value)} role="checkbox" aria-labelledby={id}>
-            <div className={checkMarkTheme}>{icon && <Icon icon={icon} customTheme={checkMarkIconTheme} />}</div>
-          </div>
-          <Typography themeName={`${themeName}.label`} tokens={checkBoxTokens}>
-            {label}
-          </Typography>
-        </label>
-      </FocusRing>
-      {isError && errorMessage && (
-        <Typography themeName={`${themeName}.errorMessage`} tokens={checkBoxTokens}>
-          {errorMessage}
-        </Typography>
-      )}
-    </div>
-  )
-}
-
-const CheckboxGroupItem = (props: TCheckboxGroupItemProps) => {
-  const state = useCheckboxGroupCtx()
-  return state && <ContextCheckboxGroupItem state={state} {...props} />
-}
-
-export default CheckboxGroupItem

package/src/components/fields/CheckboxGroup/index.tsx

@@ -1,49 +0,0 @@
-'use client'
-
-/* eslint-disable no-unused-vars */
-import { useCheckboxGroupState } from '@react-stately/checkbox'
-import { useCheckboxGroup } from 'react-aria'
-import { CheckboxGroupProvider } from '../../../providers/CheckboxGroup'
-import Box from '../../Box'
-import Typography from '../../Typography'
-import type { TCheckboxGroupProps } from './interface'
-
-const CheckboxGroup = (props: TCheckboxGroupProps) => {
-  const {
-    label,
-    isError = false,
-    errorMessage,
-    isDisabled = false,
-    children,
-    themeName = 'checkboxGroup',
-    tokens,
-  } = props
-  const state = useCheckboxGroupState(props)
-  const { groupProps, labelProps, errorMessageProps } = useCheckboxGroup(props, state)
-
-  const CheckboxGroupTokens = { ...tokens, isDisabled }
-
-  return (
-    <Box
-      {...groupProps}
-      aria-disabled={isDisabled}
-      themeName={`${themeName}.checkboxGroup`}
-      tokens={CheckboxGroupTokens}
-    >
-      {label && (
-        <Typography {...labelProps} tokens={{ size: 'h6' }}>
-          {label}
-        </Typography>
-      )}
-      <Box themeName={`${themeName}.checkboxGroupItemsGroup`}>
-        <CheckboxGroupProvider state={state}>{children}</CheckboxGroupProvider>
-      </Box>
-      {isError && errorMessage && (
-        <Typography {...errorMessageProps} tokens={{ isError: true }}>
-          {errorMessage}
-        </Typography>
-      )}
-    </Box>
-  )
-}
-export default CheckboxGroup

package/src/components/fields/CheckboxGroup/interface.ts

@@ -1,17 +0,0 @@
-import type React from 'react'
-import type { AriaCheckboxGroupItemProps } from 'react-aria'
-import type { CheckboxGroupProps } from 'react-stately'
-import type { TDefaultComponent } from '../../../types/components'
-import type { TCheckboxProps } from '../Checkbox/Checkbox.interface'
-
-export interface TCheckboxGroupProps extends TDefaultComponent, CheckboxGroupProps {
-  children: React.ReactNode
-  isError?: boolean
-  isDisabled?: boolean
-  errorMessage?: string
-  label?: string
-}
-
-export type TCheckboxGroupItemProps = TDefaultComponent &
-  Omit<AriaCheckboxGroupItemProps, 'children'> &
-  Omit<TCheckboxProps, 'children'>

package/src/components/fields/DatePicker/DateRangePicker.tsx

@@ -1,73 +0,0 @@
-'use client'
-
-/* eslint-disable react/require-default-props */
-import { useDateRangePicker } from '@react-aria/datepicker'
-import { useDateRangePickerState } from '@react-stately/datepicker'
-import { useRef } from 'react'
-import useThemeContext from '../../../providers/Theme/hooks'
-import Button from '../../Button'
-import RangeCalendar from '../../Calendar/RangeCalendar'
-import { Dialog } from '../../Dialog'
-import Icon from '../../Icon'
-import { CalendarPopover } from './components/CalendarPopover'
-import DateField from './components/DateField'
-import type { TDateRangePickerProps } from './interface'
-
-function DateRangePicker(props: TDateRangePickerProps) {
-  const state = useDateRangePickerState(props)
-  const ref = useRef(null)
-  const {
-    labelProps,
-    descriptionProps,
-    groupProps,
-    startFieldProps,
-    endFieldProps,
-    buttonProps,
-    dialogProps,
-    calendarProps,
-  } = useDateRangePicker(props, state, ref)
-
-  const { label, buttonLabel, description, themeName = 'datePicker', tokens, popoverPlacement, icon } = props
-
-  const containerTheme = useThemeContext(`${themeName}.container`, tokens)
-  const dateFieldTheme = useThemeContext(`${themeName}.dateField`, tokens)
-  const labelTheme = useThemeContext(`${themeName}.label`, tokens)
-
-  return (
-    <div className={containerTheme}>
-      {label && <span {...labelProps}>{label}</span>}
-      {description && <div {...descriptionProps}>{description}</div>}
-      <div {...groupProps} ref={ref}>
-        <Button
-          themeName={`${themeName}.button`}
-          tokens={{ ...tokens }}
-          type="button"
-          {...buttonProps}
-          handlePress={buttonProps.onPress}
-        >
-          {buttonLabel && <p className={labelTheme}>{buttonLabel}</p>}
-          <div className={dateFieldTheme}>
-            <DateField {...startFieldProps} /> -
-            <DateField {...endFieldProps} />
-            {state.validationState === 'invalid' && '❌'}
-          </div>
-          <Icon themeName={`${themeName}.icon`} tokens={{ ...tokens }} icon={icon ?? 'ArrowDown'} />
-        </Button>
-      </div>
-      {state.isOpen && (
-        <CalendarPopover triggerRef={ref} state={state} placement={popoverPlacement}>
-          <Dialog {...dialogProps}>
-            <div className={dateFieldTheme}>
-              <DateField {...startFieldProps} /> -
-              <DateField {...endFieldProps} />
-              {state.validationState === 'invalid' && '❌'}
-            </div>
-            <RangeCalendar {...calendarProps} />
-          </Dialog>
-        </CalendarPopover>
-      )}
-    </div>
-  )
-}
-
-export default DateRangePicker

package/src/components/fields/DatePicker/components/CalendarPopover.tsx

@@ -1,31 +0,0 @@
-import { usePopover, DismissButton, Overlay } from '@react-aria/overlays'
-import * as React from 'react'
-import useThemeContext from '../../../../providers/Theme/hooks'
-import type { TCalendarPopoverProps } from '../interface'
-
-export function CalendarPopover({ themeName = 'datePicker', tokens, ...rest }: TCalendarPopoverProps) {
-  const ref = React.useRef(null)
-  const { state, children } = { ...rest }
-
-  const { popoverProps, underlayProps } = usePopover(
-    {
-      ...rest,
-      popoverRef: ref,
-    },
-    state,
-  )
-
-  const underlayTheme = useThemeContext(`${themeName}.calendarUnderlay`, tokens)
-  const popoverTheme = useThemeContext(`${themeName}.calendarPopover`, tokens)
-
-  return (
-    <Overlay>
-      <div {...underlayProps} className={underlayTheme} />
-      <div {...popoverProps} ref={ref} className={popoverTheme}>
-        <DismissButton onDismiss={state.close} />
-        {children}
-        <DismissButton onDismiss={state.close} />
-      </div>
-    </Overlay>
-  )
-}

package/src/components/fields/DatePicker/components/DateField.tsx

@@ -1,61 +0,0 @@
-/* eslint-disable no-unused-vars */
-import type { DateValue } from '@internationalized/date'
-import { createCalendar } from '@internationalized/date'
-import type { AriaDatePickerProps } from '@react-aria/datepicker'
-import { useDateField, useDateSegment } from '@react-aria/datepicker'
-import { useLocale } from '@react-aria/i18n'
-import { useDateFieldState } from '@react-stately/datepicker'
-import { useRef } from 'react'
-import { FocusRing } from 'react-aria'
-import useThemeContext from '../../../../providers/Theme/hooks'
-import type { TDateSegmentProps } from '../interface'
-
-function DateSegment({ segment, state }: TDateSegmentProps) {
-  const ref = useRef(null)
-  const { segmentProps } = useDateSegment(segment, state, ref)
-
-  const theme = useThemeContext('datePicker.dateSegment')
-
-  return (
-    <FocusRing focusRingClass="has-focus-ring">
-      <div {...segmentProps} ref={ref} className={theme}>
-        {/* Always reserve space for the placeholder, to prevent layout shift when editing. */}
-        <span
-          aria-hidden="true"
-          style={{
-            visibility: segment.isPlaceholder ? 'visible' : 'hidden',
-            height: segment.isPlaceholder ? '' : 0,
-            pointerEvents: 'none',
-            display: segment.isPlaceholder ? 'block' : 'none',
-          }}
-        >
-          {segment.placeholder}
-        </span>
-        {segment.isPlaceholder ? '' : segment.text}
-      </div>
-    </FocusRing>
-  )
-}
-
-function DateField(props: AriaDatePickerProps<DateValue>) {
-  const { locale } = useLocale()
-  const state = useDateFieldState({
-    ...props,
-    locale,
-    createCalendar,
-  })
-
-  const ref = useRef(null)
-  const { fieldProps } = useDateField(props, state, ref)
-
-  return (
-    <div {...fieldProps} ref={ref} className="flex">
-      {state.segments.map((segment, i) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <DateSegment key={i} segment={segment} state={state} />
-      ))}
-    </div>
-  )
-}
-
-export default DateField

package/src/components/fields/DatePicker/date-picker.stories.mdx

@@ -1,55 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import DatePicker from './'
-import DateRangePicker from './DateRangePicker'
-import { OverlayContainer } from '@react-aria/overlays'
-
-<Meta
-  title="Form/Fields/DatePicker"
-  component={DatePicker}
-  args={{
-    label: 'Filter by date',
-    onChange: (date) => console.log(date),
-  }}
-/>
-
-export const DatePickerTemplate = (args) => <DatePicker {...args} />
-
-export const DateRangePickerTemplate = (args) => <DateRangePicker {...args} />
-
-# Date Picker
-
-Date Picker component.
-
-<Canvas>
-  <Story args={{ buttonLabel: 'Date Picker' }} name="Default">
-    {DatePickerTemplate.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story name="Date Field and Icon">{DatePickerTemplate.bind({})}</Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    args={{
-      tokens: {
-        dateFieldShown: false,
-      },
-    }}
-    name="Only Icon"
-  >
-    {DatePickerTemplate.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    args={{
-      buttonLabel: 'Date Range Picker',
-    }}
-    name="Date Range Picker"
-  >
-    {DateRangePickerTemplate.bind({})}
-  </Story>
-</Canvas>

package/src/components/fields/DatePicker/index.tsx

@@ -1,71 +0,0 @@
-'use client'
-
-import { useDatePicker } from '@react-aria/datepicker'
-import { useDatePickerState } from '@react-stately/datepicker'
-import { useRef } from 'react'
-import useThemeContext from '../../../providers/Theme/hooks'
-import Button from '../../Button'
-import Calendar from '../../Calendar'
-import { Dialog } from '../../Dialog'
-import Icon from '../../Icon'
-import { CalendarPopover } from './components/CalendarPopover'
-import DateField from './components/DateField'
-import type { TDatePickerProps } from './interface'
-
-function DatePicker({
-  popoverPlacement = 'bottom start',
-  tokens,
-  customTheme,
-  themeName = 'datePicker',
-  icon = 'ArrowDown',
-  description,
-  buttonLabel,
-  ...rest
-}: TDatePickerProps) {
-  const state = useDatePickerState({ ...rest })
-  const ref = useRef(null)
-  const { groupProps, fieldProps, labelProps, descriptionProps, buttonProps, dialogProps, calendarProps } =
-    useDatePicker({ ...rest }, state, ref)
-
-  const { label } = { ...rest }
-
-  const containerTheme = useThemeContext(`${themeName}.container`, tokens)
-  const dateFieldTheme = useThemeContext(`${themeName}.dateField`, tokens)
-  const labelTheme = useThemeContext(`${themeName}.label`, tokens)
-
-  return (
-    <div className={containerTheme}>
-      {label && <span {...labelProps}>{label}</span>}
-      {description && <div {...descriptionProps}>{description}</div>}
-      <div {...groupProps} ref={ref}>
-        <Button
-          themeName={`${themeName}.button`}
-          tokens={{ ...tokens }}
-          type="button"
-          {...buttonProps}
-          handlePress={buttonProps.onPress}
-        >
-          {buttonLabel && <p className={labelTheme}>{buttonLabel}</p>}
-          <div className={dateFieldTheme}>
-            <DateField {...fieldProps} />
-            {state.validationState === 'invalid' && '❌'}
-          </div>
-          <Icon themeName={`${themeName}.icon`} tokens={{ ...tokens }} icon={icon} />
-        </Button>
-      </div>
-      {state.isOpen && (
-        <CalendarPopover triggerRef={ref} state={state} placement={popoverPlacement}>
-          <Dialog {...dialogProps}>
-            <div>
-              <DateField {...fieldProps} />
-              {state.validationState === 'invalid' && '❌'}
-            </div>
-            <Calendar {...calendarProps} />
-          </Dialog>
-        </CalendarPopover>
-      )}
-    </div>
-  )
-}
-
-export default DatePicker

package/src/components/fields/DatePicker/interface.ts

@@ -1,69 +0,0 @@
-/* eslint-disable no-unused-vars */
-import type { DateValue } from '@internationalized/date'
-import type {
-  DateFieldState,
-  DateSegment,
-  DatePickerStateOptions,
-  DateRangePickerStateOptions,
-} from '@react-stately/datepicker'
-import type { RangeValue } from '@react-types/shared'
-import type React from 'react'
-import type { AriaPopoverProps } from 'react-aria'
-import type { OverlayTriggerState } from 'react-stately'
-import type { TDefaultComponent } from '../../../types/components'
-
-export interface TDateSegmentProps {
-  segment: DateSegment
-  state: DateFieldState
-}
-
-type PopoverPlacement =
-  | 'bottom'
-  | 'bottom left'
-  | 'bottom right'
-  | 'bottom start'
-  | 'bottom end'
-  | 'top'
-  | 'top left'
-  | 'top right'
-  | 'top start'
-  | 'top end'
-  | 'left'
-  | 'left top'
-  | 'left bottom'
-  | 'start'
-  | 'start top'
-  | 'start bottom'
-  | 'right'
-  | 'right top'
-  | 'right bottom'
-  | 'end'
-  | 'end top'
-  | 'end bottom'
-
-export interface TDatePickerProps extends DatePickerStateOptions<DateValue>, TDefaultComponent {
-  label?: string
-  popoverPlacement?: PopoverPlacement
-  icon?: string
-  buttonLabel?: string
-  description?: string
-}
-
-export interface TDateRangePickerProps extends DateRangePickerStateOptions<DateValue>, TDefaultComponent {
-  buttonLabel?: string
-  label?: string
-  description?: string
-  icon?: string
-  popoverPlacement?: PopoverPlacement
-  minValue?: DateValue
-  value?: {
-    start: DateValue
-    end: DateValue
-  }
-  onChange?: (value: RangeValue<DateValue>) => void
-}
-
-export interface TCalendarPopoverProps extends Omit<AriaPopoverProps, 'popoverRef'>, TDefaultComponent {
-  children: React.ReactNode
-  state: OverlayTriggerState
-}

package/src/components/fields/Radio/Radio.interface.ts

@@ -1,30 +0,0 @@
-import type React from 'react'
-import type { ChangeHandler, RefCallBack } from 'react-hook-form'
-import type { TDefaultComponent, TReactHookForm } from '../../../types/components'
-
-export type TFieldReactHookForm = TReactHookForm & TDefaultComponent
-
-export interface TRadioProps extends TFieldReactHookForm {
-  id: string
-  label: string
-  name: string
-  required?: boolean
-  isDisabled?: boolean
-  isError?: boolean
-  errorMessage?: string
-  ariaLabel?: string
-  value: string
-  onChange?: ((isSelected: boolean) => void) | ChangeHandler
-  inputRef?: RefCallBack
-  icon?: React.ReactNode
-}
-
-export interface TRadioLabelStyles {
-  isDisabled?: boolean
-}
-
-export interface TRadioStyles {
-  isDisabled?: boolean
-  isFocused?: boolean
-  isError?: boolean
-}

package/src/components/fields/Radio/index.tsx

@@ -1,63 +0,0 @@
-'use client'
-
-import { isEmpty } from 'lodash'
-import { useRef } from 'react'
-import { useRadio, VisuallyHidden, useFocusRing, FocusRing, mergeProps } from 'react-aria'
-import { get, useFormContext } from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
-import { useRadioGroupCtx } from '../../../providers/RadioGroup/RadioGroup'
-import useThemeContext from '../../../providers/Theme/hooks'
-import Typography from '../../Typography'
-import type { TRadioProps } from './Radio.interface'
-
-const Radio = (props: TRadioProps) => {
-  const { id, label, themeName = 'radio', tokens, customTheme, value, fieldRef } = props
-  const state = useRadioGroupCtx()
-  const ref = useRef<HTMLInputElement | null>(null)
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const { inputProps } = useRadio(props, state!, ref)
-  const isSelected = state?.selectedValue === value
-  const { focusProps } = useFocusRing()
-
-  const radioTokens = { ...tokens, selected: isSelected }
-  const labelTheme = useThemeContext(`${themeName}.label`, radioTokens, customTheme)
-  const radioTheme = useThemeContext(`${themeName}.radio`, radioTokens, customTheme)
-  const selectedMarkTheme = useThemeContext(`${themeName}.selectedMark`, radioTokens, customTheme)
-
-  return (
-    <div>
-      <FocusRing focusRingClass="has-focus-ring" within>
-        <label htmlFor={id} className={labelTheme}>
-          <VisuallyHidden>
-            <input
-              type="radio"
-              {...mergeProps(focusProps, inputProps)}
-              ref={(e) => {
-                fieldRef?.(e)
-                ref.current = e
-              }}
-            />
-          </VisuallyHidden>
-          <div className={radioTheme} aria-checked={isSelected} role="radio" aria-labelledby={id}>
-            <div className={selectedMarkTheme} />
-          </div>
-          <Typography themeName={`${themeName}.label`}>{label}</Typography>
-        </label>
-      </FocusRing>
-    </div>
-  )
-}
-
-export const ReactHookFormRadio = (props: TRadioProps) => {
-  const { name, required } = props
-  const { register, formState } = useFormContext()
-  const error: Error = get(formState.errors, name)
-  const errMsg = error?.message ?? undefined
-  const { t } = useTranslation('components')
-  const { ref: refCallback, ...rest } = register(name, {
-    required: required ? t('FORM.ERROR.REQUIRED') ?? 'required' : false,
-  })
-
-  return <Radio fieldRef={refCallback} {...rest} {...props} isError={!isEmpty(errMsg)} errorMessage={errMsg} />
-}
-export default Radio

package/src/components/fields/RadioGroup/index.tsx

@@ -1,33 +0,0 @@
-'use client'
-
-/* eslint-disable no-unused-vars */
-import { useRadioGroupState } from '@react-stately/radio'
-import { useRadioGroup } from 'react-aria'
-import { RadioGroupProvider } from '../../../providers/RadioGroup/RadioGroup'
-import Box from '../../Box'
-import Typography from '../../Typography'
-import type { TRadioGroupProps } from './interface'
-
-const RadioGroup = (props: TRadioGroupProps) => {
-  const { label, isError = false, errorMessage, isDisabled = false, children, themeName = 'radioGroup', tokens } = props
-  const state = useRadioGroupState(props)
-  const { radioGroupProps } = useRadioGroup(props, state)
-
-  const radioGroupTokens = { ...tokens, isDisabled }
-
-  return (
-    <Box
-      {...radioGroupProps}
-      aria-disabled={isDisabled}
-      themeName={`${themeName}.radioGroup`}
-      tokens={radioGroupTokens}
-    >
-      {label && <Typography tokens={{ size: 'h6' }}>{label}</Typography>}
-      <Box themeName={`${themeName}.radioGroupItemsGroup`}>
-        <RadioGroupProvider state={state}>{children}</RadioGroupProvider>
-      </Box>
-      {isError && errorMessage && <Typography tokens={{ isError: true }}>{errorMessage}</Typography>}
-    </Box>
-  )
-}
-export default RadioGroup

package/src/components/fields/RadioGroup/interface.ts

@@ -1,10 +0,0 @@
-import type React from 'react'
-import type { TDefaultComponent } from '../../../types/components'
-
-export interface TRadioGroupProps extends TDefaultComponent {
-  children: React.ReactNode
-  isError?: boolean
-  isDisabled?: boolean
-  errorMessage?: string
-  label?: string
-}