@okam/stack-ui 1.25.3 → 1.25.4

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

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

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

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

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

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

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

@@ -1,108 +0,0 @@
-'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/src/components/fields/Select/components/Listbox.tsx

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

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

@@ -1,32 +0,0 @@
-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/src/components/fields/SelectItem/SelectItem.tsx

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

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

package/src/components/fields/TextArea/textArea.stories.mdx

@@ -1,60 +0,0 @@
-{/* TextArea.stories.mdx */}
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import TextArea from './index'
-
-<Meta
-  title="Form/Fields/Textarea"
-  component={TextArea}
-  parameters={{
-    layout: 'fullscreen',
-  }}
-  args={{
-    id: '',
-    name: 'name',
-    label: 'First name',
-    placeholder: 'Message',
-    required: true,
-    disabled: false,
-    isError: false,
-    ariaLabel: 'Message',
-  }}
-/>
-
-export const Template = (args) => {
-  const { backgroundColor, ...rest } = args
-  return (
-    <div className={`flex flex-col m-auto h-screen justify-center items-center`}>
-      <TextArea {...rest} />
-    </div>
-  )
-}
-
-# Text Input Field
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      disabled: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story
-    name="Error"
-    args={{
-      errorMessage: 'This is an error message',
-      isError: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>