@okam/stack-ui 1.25.2 → 1.25.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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