@okam/stack-ui 1.25.2 → 1.25.3

package/src/components/fields/RadioGroup/radio-group.stories.mdx

@@ -0,0 +1,56 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import RadioGroup from './index'
+import Radio from '../Radio/index'
+
+<Meta title="Form/Fields/RadioGroup" component={RadioGroup} />
+
+export const Template = (args) => {
+  return (
+    <RadioGroup label="Question 1/12" {...args}>
+      <Radio id="item1" label="Item 1" name="item" value="1" aria-label="Choose item 1" />
+      <Radio id="item2" label="Item 2" name="item" value="2" aria-label="Choose item 2" />
+      <Radio id="item3" label="Item 3" name="item" value="3" aria-label="Choose item 3" />
+    </RadioGroup>
+  )
+}
+
+export const TemplateError = (args) => {
+  return (
+    <RadioGroup label="Question 2/12" {...args}>
+      <Radio id="item4" label="Item 1" name="item" value="1" aria-label="Choose item 1" />
+      <Radio id="item5" label="Item 2" name="item" value="2" aria-label="Choose item 2" />
+      <Radio id="item6" label="Item 3" name="item" value="3" aria-label="Choose item 3" />
+    </RadioGroup>
+  )
+}
+
+# RadioGroup
+
+RadioGroup component.
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      isDisabled: true,
+    }}
+>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Error"
+    args={{
+      isError: true,
+      errorMessage: 'This is an error message',
+    }}
+  >
+    {TemplateError.bind({})}
+  </Story>
+</Canvas>

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

@@ -0,0 +1,59 @@
+'use client'
+
+import React from 'react'
+import { FocusRing, useSearchField } from 'react-aria'
+import { useSearchFieldState } from 'react-stately'
+import useThemeContext from '../../../providers/Theme/hooks'
+import { useUserQueryValHook } from '../../../providers/UserSearchQuery'
+import Button from '../../Button'
+import Close from '../../icons/CloseBtn'
+import Search from '../../icons/Search'
+import Typography from '../../Typography'
+import type TSearchProps from './interface'
+
+const SearchField = (props: TSearchProps) => {
+  const { setUserSearchQuery } = useUserQueryValHook()
+  const { label, themeName = 'search', tokens, customTheme, disabled, errorMessage, placeholder } = props
+  const state = useSearchFieldState(props)
+  setUserSearchQuery(state.value)
+  const ref = React.useRef(null)
+  const { labelProps, inputProps, errorMessageProps, clearButtonProps } = useSearchField(props, state, ref)
+
+  const searchTokens = { ...tokens, isError: errorMessage != null }
+
+  const wrapperTheme = useThemeContext(`${themeName}.wrapper`, searchTokens, customTheme)
+  const inputTheme = useThemeContext(`${themeName}.input`, searchTokens, customTheme)
+  const labelTheme = useThemeContext(`${themeName}.label`, searchTokens, customTheme)
+  const containerTheme = useThemeContext(`${themeName}.container`, searchTokens, customTheme)
+
+  return (
+    <div className={wrapperTheme} aria-disabled={disabled}>
+      {label && (
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
+        <label {...labelProps} className={labelTheme}>
+          {label}
+        </label>
+      )}
+      <div className={containerTheme}>
+        <input ref={ref} {...inputProps} placeholder={placeholder} className={inputTheme} disabled={disabled} />
+        <FocusRing focusRingClass="has-focus-ring">
+          <Button
+            handlePress={clearButtonProps.onPress}
+            tokens={{ isIconOnly: true, buttonStyle: 'hollow' }}
+            themeName={`${themeName}.icon`}
+            aria-label="clear"
+          >
+            {state.value === '' ? <Search width="16" height="16" /> : <Close width="16" height="16" />}
+          </Button>
+        </FocusRing>
+      </div>
+      {errorMessage && (
+        <Typography themeName={`${themeName}.errorMessage`} tokens={searchTokens} {...errorMessageProps}>
+          {errorMessage}
+        </Typography>
+      )}
+    </div>
+  )
+}
+
+export default SearchField

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

@@ -0,0 +1,10 @@
+import type React from 'react'
+import type { AriaSearchFieldProps } from 'react-aria'
+import type { TDefaultComponent } from '../../../types/components'
+
+export default interface TSearchProps extends AriaSearchFieldProps, TDefaultComponent {
+  disabled?: boolean
+  placeholder?: string
+  ariaLabel?: string
+  errorMessage?: React.ReactNode
+}

package/src/components/fields/SearchField/search.stories.mdx

@@ -0,0 +1,91 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { ArgTypes } from '@storybook/blocks'
+import Search from './'
+import { SearchBarProvider } from '../../../providers/UserSearchQuery'
+
+<Meta
+  title="Form/Fields/Search"
+  component={Search}
+  args={{
+    placeholder: 'Search',
+    onChange: (value) => console.log(`You have typed ${value}`),
+    onSubmit: (value) => console.log(`You have submitted ${value}`),
+    'aria-label': 'Search',
+  }}
+/>
+
+export const Template = (args) => (
+  <SearchBarProvider userQuery="">
+    <Search {...args} />
+  </SearchBarProvider>
+)
+
+# Search
+
+### Search component. Used to search various information. To see typing events, look at the console.
+
+## Props
+
+<ArgTypes />
+
+## Showcase
+
+### Default
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      id: 'default',
+      label: 'Search',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### No label
+
+<Canvas>
+  <Story
+    name="No label"
+    args={{
+      id: 'no-label',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      id: 'disabled',
+      label: 'Search',
+      disabled: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Error
+
+<Canvas>
+  <Story
+    name="Error"
+    args={{
+      id: 'error',
+      label: 'Search',
+      errorMessage: 'This is an error message',
+    }}
+
+>
+
+    {Template.bind({})}
+
+  </Story>
+</Canvas>

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

@@ -0,0 +1,24 @@
+import type { Key } from 'react'
+import type React from 'react'
+import type { RefCallBack } from 'react-hook-form'
+import type { TDefaultComponent, TReactHookForm } from '../../../types/components'
+
+export type TFieldReactHookForm = TReactHookForm & Omit<TDefaultComponent, 'children'>
+export interface TSelectProps extends TFieldReactHookForm {
+  id: string
+  icon?: string | React.ReactNode
+  label?: string
+  name: string
+  required?: boolean
+  disabled?: boolean
+  isError?: boolean
+  errorMessage?: string
+  fieldRef?: RefCallBack
+  placeholderLabel: string
+  hookFormRef?: RefCallBack
+  onSelectionChange?: (value: Key) => void
+  defaultValue?: string
+  value?: string
+  popoverMatchesWidth?: boolean
+  options?: { key: string; value: string }[]
+}

package/src/components/fields/Select/Select.stories.mdx

@@ -0,0 +1,53 @@
+{/* Select.stories.mdx */}
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import Select, { SelectStyled } from './Select'
+import SelectItem from '../SelectItem/SelectItem'
+import SelectContent from '../../../storybook/SelectField'
+import ChevronLeft from '../../icons/ChevronLeft'
+
+<Meta
+  title="Form/Fields/Select"
+  component={Select}
+  args={{
+    id: 'season',
+    name: 'season',
+    label: 'Season',
+    placeholderLabel: 'Select a season',
+    onSelectionChange: () => console.log('test'),
+  }}
+/>
+
+export const Template = (args) => <SelectContent {...args} />
+
+# Select
+
+Select Field component.
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      disabled: true,
+      icon: 'ChevronLeft',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Error"
+    args={{
+      isError: true,
+      errorMessage: 'This is an error message',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/fields/Select/Select.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { isEmpty } from 'lodash'
+import React, { useRef } from 'react'
+import { HiddenSelect, useSelect } from 'react-aria'
+import { get, useFormContext } from 'react-hook-form'
+import { useSelectState } from 'react-stately'
+import Box from '../../Box'
+import { ButtonWithForwardRef } from '../../Button'
+import Icon from '../../Icon'
+import Typography from '../../Typography'
+import SelectItem from '../SelectItem/SelectItem'
+import { ListBox } from './components/Listbox'
+import Popover from './components/Popover'
+import type { TSelectProps } from './Select.interface'
+
+const Select = (props: TSelectProps) => {
+  const {
+    name,
+    placeholderLabel,
+    disabled,
+    hookFormRef,
+    isError = false,
+    errorMessage,
+    themeName = 'select',
+    tokens,
+    customTheme,
+    label,
+    onSelectionChange,
+    defaultValue,
+    value,
+    icon,
+    popoverMatchesWidth,
+    options,
+    ...rest
+  } = props
+  const fieldRef = useRef<HTMLButtonElement & HTMLAnchorElement>(null)
+
+  const state = useSelectState({
+    ...rest,
+    children: SelectItem,
+    selectedKey: value,
+    defaultSelectedKey: defaultValue,
+    items: options,
+    onSelectionChange,
+  })
+
+  const { triggerProps, menuProps, labelProps } = useSelect({ ...rest, label }, state, fieldRef)
+  const { onPress, onPressStart, ...restofTriggerProps } = triggerProps
+
+  return (
+    <Box themeName={`${themeName}.wrapper`}>
+      {label && (
+        <Typography {...labelProps} as="label" themeName={`${themeName}.label`}>
+          {label}
+        </Typography>
+      )}
+      <HiddenSelect {...hookFormRef} state={state} triggerRef={fieldRef} name={name} isDisabled />
+      <Box themeName={`${themeName}.container`}>
+        <ButtonWithForwardRef
+          {...restofTriggerProps}
+          handlePress={(event) => {
+            onPress?.(event)
+            onPressStart?.(event)
+          }}
+          ref={fieldRef}
+          disabled={disabled}
+          themeName={`${themeName}.button`}
+          tokens={{ ...tokens, intent: isError ? 'error' : 'default' }}
+        >
+          {state.selectedItem ? state.selectedItem.rendered : placeholderLabel}
+          <Icon icon={icon ?? 'ArrowDown'} />
+        </ButtonWithForwardRef>
+        {state.isOpen && fieldRef.current && (
+          <Popover
+            tokens={tokens}
+            state={state}
+            triggerRef={fieldRef}
+            placement="bottom"
+            themeName={`${themeName}.popover`}
+            style={{ [`--${themeName}-container-width`]: `${fieldRef.current?.offsetWidth}px` } as React.CSSProperties}
+          >
+            <ListBox {...menuProps} themeName={themeName} state={state} />
+          </Popover>
+        )}
+        {isError && (
+          <Typography tokens={{ ...tokens, isError }} themeName={`${themeName}.errorMessage`}>
+            {errorMessage}
+          </Typography>
+        )}
+      </Box>
+    </Box>
+  )
+}
+
+export const ReactHookFormSelect = (props: TSelectProps) => {
+  const { name, required } = props
+  const { register, formState } = useFormContext()
+  const errors = get(formState.errors, name)
+  const errMsg = errors?.message ?? undefined
+  const { ref } = register(name, {
+    required: required ? 'This is an error message' : false,
+  })
+
+  return <Select {...props} isError={!isEmpty(errMsg)} errorMessage={errMsg} hookFormRef={ref} />
+}
+
+export default Select

package/{components/fields/Select/components/Listbox.interface.d.ts → src/components/fields/Select/components/Listbox.interface.ts}

@@ -1,12 +1,15 @@
-import type React from 'react';
-import type { AriaListBoxOptions, AriaOptionProps } from 'react-aria';
-import type { ListState } from 'react-stately';
-import type { TDefaultComponent } from '../../../../types/components';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type React from 'react'
+import type { AriaListBoxOptions, AriaOptionProps } from 'react-aria'
+import type { ListState } from 'react-stately'
+import type { TDefaultComponent } from '../../../../types/components'
+
 export interface TListBoxProps extends AriaListBoxOptions<unknown>, TDefaultComponent {
-    listBoxRef?: React.RefObject<any>;
-    state: ListState<unknown>;
+  listBoxRef?: React.RefObject<any>
+  state: ListState<unknown>
 }
+
 export interface TOptionProps extends AriaOptionProps, TDefaultComponent {
-    item: any;
-    state: ListState<unknown>;
+  item: any
+  state: ListState<unknown>
 }

package/src/components/fields/Select/components/Listbox.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { FocusScope, useListBox, useOption } from 'react-aria'
+import useThemeContext from '../../../../providers/Theme/hooks'
+import { TypographyWithForwardRef } from '../../../Typography'
+import type { TListBoxProps, TOptionProps } from './Listbox.interface'
+
+const Option = ({ item, state, themeName = 'li' }: TOptionProps) => {
+  const ref = React.useRef(null)
+  const { optionProps, isFocusVisible } = useOption({ key: item.key }, state, ref)
+
+  const theme = useThemeContext(themeName)
+  return (
+    <TypographyWithForwardRef
+      as="li"
+      {...optionProps}
+      tokens={{ className: `${theme} ${isFocusVisible ? 'has-focus-ring' : ''}` }}
+      ref={ref}
+    >
+      {item.rendered}
+    </TypographyWithForwardRef>
+  )
+}
+
+const ListBox = (props: TListBoxProps) => {
+  const ref = React.useRef(null)
+  const { listBoxRef = ref, state, themeName = 'option' } = props
+  const { listBoxProps } = useListBox(props, state, listBoxRef)
+
+  return (
+    <FocusScope autoFocus restoreFocus contain>
+      <TypographyWithForwardRef {...listBoxProps} ref={listBoxRef} as="ul" themeName={`${themeName}.ul`}>
+        {[...state.collection].map((item) => (
+          <Option themeName={`${themeName}.li`} key={item.key} item={item} state={state} />
+        ))}
+      </TypographyWithForwardRef>
+    </FocusScope>
+  )
+}
+
+export { ListBox, Option }

package/src/components/fields/Select/components/Popover.interface.ts

@@ -0,0 +1,14 @@
+import type React from 'react'
+import type { AriaPopoverProps } from 'react-aria'
+import type { OverlayTriggerState } from 'react-stately'
+import type { TToken } from '../../../../providers/Theme/interface'
+import type { TDefaultComponent } from '../../../../types/components'
+
+export interface TPopoverProps extends Omit<AriaPopoverProps, 'popoverRef'>, TDefaultComponent {
+  children: React.ReactNode
+  state: OverlayTriggerState
+  variant?: string
+  popoverRef?: React.RefObject<HTMLDivElement>
+  tokens?: TToken
+  style?: React.CSSProperties
+}

package/src/components/fields/Select/components/Popover.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { DismissButton, Overlay, usePopover } from 'react-aria'
+import Box, { BoxWithForwardRef } from '../../../Box'
+import type { TPopoverProps } from './Popover.interface'
+
+const Popover = (props: TPopoverProps) => {
+  const ref = React.useRef(null)
+  const { popoverRef = ref, state, children, themeName = 'popover', tokens, customTheme, triggerRef, ...rest } = props
+  const { popoverProps, underlayProps } = usePopover(
+    {
+      ...props,
+      popoverRef,
+      triggerRef,
+    },
+    state,
+  )
+
+  return (
+    <Overlay>
+      <div {...underlayProps} style={{ position: 'fixed', inset: 0 }} />
+      <Box {...rest}>
+        <BoxWithForwardRef {...popoverProps} ref={popoverRef} themeName={themeName} tokens={tokens}>
+          <DismissButton onDismiss={state.close} />
+          {children}
+          <DismissButton onDismiss={state.close} />
+        </BoxWithForwardRef>
+      </Box>
+    </Overlay>
+  )
+}
+
+export default Popover

package/{components/fields/SelectItem/SelectItem.interface.d.ts → src/components/fields/SelectItem/SelectItem.interface.ts}

@@ -1,5 +1,6 @@
-import type { TDefaultComponent } from '../../../types/components';
+import type { TDefaultComponent } from '../../../types/components'
+
 export interface TSelectItemProps extends TDefaultComponent {
-    key: string;
-    value: string;
+  key: string
+  value: string
 }

package/src/components/fields/SelectItem/SelectItem.tsx

@@ -0,0 +1,10 @@
+import { Item } from 'react-stately'
+import type { TSelectItemProps } from './SelectItem.interface'
+
+const SelectItem = (props: TSelectItemProps) => {
+  const { key, value } = props
+
+  return <Item key={key}>{value}</Item>
+}
+
+export default SelectItem

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

@@ -0,0 +1,105 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+
+'use client'
+
+import { FocusRing } from '@react-aria/focus'
+import { isEmpty } from 'radash'
+import React, { useRef } from 'react'
+import { useTextField } from 'react-aria'
+import { useFormContext, get } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import useThemeContext from '../../../providers/Theme/hooks'
+import Typography from '../../Typography'
+import type { TTextInputProps } from '../TextInputField/interface'
+
+const TextArea = (props: TTextInputProps) => {
+  const {
+    id,
+    label,
+    name,
+    placeholder,
+    required,
+    disabled = false,
+    errorMessage,
+    ariaLabel,
+    value,
+    onBlur,
+    onChange,
+    fieldRef,
+    themeName = 'textarea',
+    tokens,
+    customTheme,
+  } = props
+  const ref = useRef<HTMLTextAreaElement | null>(null)
+  const { errorMessageProps, inputProps, labelProps } = useTextField<'textarea' | 'input'>(props, ref)
+
+  const inputTokens = { ...tokens, isDisabled: disabled, isError: errorMessage != null }
+
+  const wrapper = useThemeContext(`${themeName}.wrapper`, inputTokens, customTheme)
+  const input = useThemeContext(`${themeName}.input`, inputTokens, customTheme)
+  const labelTheme = useThemeContext(`${themeName}.label`, inputTokens, customTheme)
+  const container = useThemeContext(`${themeName}.container`, inputTokens, customTheme)
+
+  return (
+    <div>
+      <div className={wrapper} aria-disabled={disabled}>
+        {label && (
+          <label className={labelTheme} {...labelProps}>
+            {label}
+          </label>
+        )}
+        <div className={container}>
+          <FocusRing focusRingClass="has-focus-ring">
+            <textarea
+              {...(inputProps as object)}
+              ref={(e) => {
+                fieldRef?.(e)
+                ref.current = e
+              }}
+              className={input}
+              placeholder={placeholder}
+              disabled={disabled}
+              required={required}
+              id={id}
+              name={name}
+              aria-label={ariaLabel}
+              aria-labelledby={id}
+              value={value}
+              onBlur={onBlur}
+              onChange={onChange}
+            />
+          </FocusRing>
+        </div>
+      </div>
+      {errorMessage && (
+        <Typography themeName={`${themeName}.errorMessage`} tokens={inputTokens} {...errorMessageProps}>
+          {errorMessage}
+        </Typography>
+      )}
+    </div>
+  )
+}
+
+export const ReactHookFormTextArea = (props: TTextInputProps) => {
+  const { name, required, minLength = 0, maxLength = 99999999, validation } = 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,
+    minLength: {
+      value: minLength,
+      message: t('FORM.ERROR.MIN_LENGTH', { length: minLength }),
+    },
+    maxLength: {
+      value: maxLength,
+      message: t('FORM.ERROR.MAX_LENGTH', { length: minLength }),
+    },
+    ...validation,
+  })
+
+  return <TextArea fieldRef={refCallback} {...rest} {...props} isError={!isEmpty(errMsg)} errorMessage={errMsg} />
+}
+
+export default TextArea