@geckou/ui-react 0.1.0

package/src/components/ModalBox.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { useEffect, useId, useRef } from 'react'
+
+type Props = {
+  isShown: boolean
+  size?: 'small' | 'medium' | 'large'
+  onClose: () => void
+  header?: ReactNode
+  footer?: ReactNode
+  children: ReactNode
+  // header が無い場合のダイアログのアクセシブル名
+  ariaLabel?: string
+}
+
+const MAX_WIDTH_CLASSES = {
+  small: 'max-w-[var(--mobile-lower-width,430px)]',
+  medium: 'max-w-[var(--desktop-lower-width,1025px)]',
+  large: 'max-w-[var(--contents-max-width,1440px)]',
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      fill="currentColor"
+    >
+      <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+    </svg>
+  )
+}
+
+export function ModalBox({
+  isShown,
+  size = 'medium',
+  onClose,
+  header,
+  footer,
+  children,
+  ariaLabel,
+}: Props) {
+  const headerId = useId()
+  const dialogRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (isShown) document.body.style.overflow = 'hidden'
+    else document.body.style.overflow = ''
+
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [isShown])
+
+  useEffect(() => {
+    if (isShown) dialogRef.current?.focus()
+  }, [isShown])
+
+  return (
+    <div
+      className={`fixed top-0 left-0 z-50 flex h-dvh w-dvw cursor-pointer items-center justify-center overflow-hidden bg-[#33333380] p-[var(--sp-larger,3rem)] backdrop-blur-sm transition-opacity duration-100 max-md:px-[var(--sp-large,1.5rem)] ${
+        isShown
+          ? 'pointer-events-auto opacity-100'
+          : 'pointer-events-none opacity-0'
+      }`}
+      aria-hidden={!isShown}
+      inert={!isShown}
+      onClick={(event) => {
+        if (event.target === event.currentTarget) onClose()
+      }}
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={header ? headerId : undefined}
+        aria-label={header ? undefined : (ariaLabel ?? 'ダイアログ')}
+        tabIndex={-1}
+        className={`relative flex max-h-full w-full cursor-auto flex-col rounded-[var(--radius-small,0.1875rem)] bg-white drop-shadow-[0_0_6px_#33333355] ${MAX_WIDTH_CLASSES[size]}`}
+      >
+        {header && (
+          <header
+            id={headerId}
+            className="border-b border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] [&>h2]:font-bold [&>h2]:text-[var(--fs-large,0.875rem)]"
+          >
+            {header}
+          </header>
+        )}
+        <div className="flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]">
+          {children}
+        </div>
+        {footer && (
+          <footer className="flex justify-center gap-[var(--sp-large,1.5rem)] border-t border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:gap-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] max-md:[&>*]:flex-auto">
+            {footer}
+          </footer>
+        )}
+        <button
+          type="button"
+          aria-label="閉じる"
+          className="absolute bottom-full left-full size-[var(--icon-medium,1.125rem)] cursor-pointer leading-none text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white [&>*]:size-full"
+          onClick={onClose}
+        >
+          <CloseIcon />
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/PopupBox.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import type { ReactNode, Ref } from 'react'
+import { useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { COLOR } from '../constants'
+
+export type PopupBoxHandle = {
+  showPopup: () => void
+}
+
+type Props = {
+  position?: {
+    x: 'left' | 'right' | 'center'
+    y: 'top' | 'bottom' | 'center'
+  }
+  ref?: Ref<PopupBoxHandle>
+  children: ReactNode
+}
+
+const X_CLASSES = {
+  left: 'left-[max(calc((100vw-64rem)/2),1rem)]',
+  right: 'right-[max(calc((100vw-64rem)/2),1rem)]',
+  center: 'inset-0 m-auto',
+}
+
+const Y_CLASSES = {
+  top: 'top-14',
+  bottom: 'bottom-4',
+  center: 'inset-0 m-auto',
+}
+
+export function PopupBox({
+  position = { x: 'right', y: 'top' },
+  ref,
+  children,
+}: Props) {
+  const [isShown, setIsShown] = useState(false)
+  const [isMounted, setIsMounted] = useState(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    setIsMounted(true)
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  useImperativeHandle(ref, () => ({
+    showPopup: () => {
+      setIsShown(true)
+
+      if (timerRef.current) clearTimeout(timerRef.current)
+      timerRef.current = setTimeout(() => setIsShown(false), 3000)
+    },
+  }))
+
+  if (!isMounted) return null
+
+  return createPortal(
+    <div
+      style={{ borderColor: COLOR.blue }}
+      className={`pointer-events-none fixed z-50 h-max w-max max-w-40 rounded-[var(--radius-small,0.1875rem)] border bg-white p-[var(--sp-medium,0.75rem)] transition-[transform,opacity] duration-300 ${X_CLASSES[position.x]} ${Y_CLASSES[position.y]} ${isShown ? 'opacity-100' : 'opacity-0'}`}
+    >
+      {children}
+    </div>,
+    document.body,
+  )
+}

package/src/components/RadioButtons.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import type { CSSProperties } from 'react'
+import type {
+  Option,
+  RadioButtonStyleForEachStatus,
+  SelectValue,
+} from '../types'
+import { useId } from 'react'
+import { COLOR } from '../constants'
+
+type Props = {
+  value: SelectValue
+  onChange?: (newValue: SelectValue) => void
+  options: Option[]
+  name?: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  cssStyle?: RadioButtonStyleForEachStatus
+  isDisableAnimation?: boolean
+}
+
+export function RadioButtons({
+  value,
+  onChange,
+  options,
+  name,
+  isDisabled,
+  isRequired,
+  cssStyle,
+  isDisableAnimation,
+}: Props) {
+  const selectedValue = value ?? ''
+  // Vue 版（@geckou/ui-vue）は option ごとに別の name を振っていたため、
+  // ラジオグループとして機能しなかった（フォーム送信・キーボード操作）
+  const generatedName = useId()
+  const groupName = name ?? generatedName
+  const baseStyle = isDisabled ? cssStyle?.disabled : cssStyle?.default
+
+  const currentCssStyle = {
+    textColor: isDisabled ? COLOR.darkGray : COLOR.black,
+    backgroundColor: isDisabled ? COLOR.lightGray : COLOR.white,
+    border: {
+      color: isDisabled ? COLOR.darkGray : COLOR.blue,
+      size: '1px',
+    },
+    ...(baseStyle ?? {}),
+  }
+
+  const style = {
+    '--text-color': currentCssStyle.textColor,
+    '--border-color': currentCssStyle.border?.color,
+    '--border-size': currentCssStyle.border?.size,
+    '--background-color': currentCssStyle.backgroundColor,
+    '--duration': isDisableAnimation ? '0s' : '.3s',
+  } as CSSProperties
+
+  return (
+    <div className="flex flex-wrap items-center gap-4">
+      <style>
+        {
+          '@keyframes uiRadioPop{0%{scale:1}10%{scale:.8}50%{scale:1.2}100%{scale:1}}'
+        }
+      </style>
+      {options.map((option) => {
+        const isChecked = option.value === selectedValue
+
+        return (
+          <label
+            key={option.value}
+            style={style}
+            className={`relative grid cursor-pointer grid-cols-[auto_1fr] items-center gap-2 before:inline-block before:aspect-square before:w-4 before:rounded-full before:transition-all before:duration-(--duration) before:ease-linear before:content-[''] has-[input:disabled]:cursor-not-allowed has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-(--border-color) ${
+              isChecked
+                ? 'text-(--text-color) before:animate-[uiRadioPop_var(--duration)_ease-out] before:bg-(--border-color) before:shadow-[0_0_0_2px_var(--background-color)_inset,0_0_0_1px_var(--border-color)]'
+                : 'text-(--border-color) before:bg-(--background-color) before:shadow-[0_0_0_1px_var(--border-color)_inset]'
+            }`}
+          >
+            <input
+              type="radio"
+              name={groupName}
+              value={option.value}
+              disabled={isDisabled}
+              required={isRequired}
+              checked={isChecked}
+              onChange={() => onChange?.(option.value)}
+              className="sr-only"
+            />
+            <span>{option.label}</span>
+          </label>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/SearchableSelectBox.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import type { InputBoxStyleForEachStatus, Option } from '../types'
+import { useEffect, useRef, useState } from 'react'
+import { TextBox } from './TextBox'
+
+type Props = {
+  options: Option[]
+  value: string
+  onChange?: (newValue: string) => void
+  onSelect?: (newValue: string) => void
+  name: string
+  placeholder?: string
+  isDisabled?: boolean
+  searchTarget?: 'label' | 'value'
+  cssStyle?: InputBoxStyleForEachStatus
+}
+
+export function SearchableSelectBox({
+  options,
+  value,
+  onChange,
+  onSelect,
+  name,
+  placeholder = '入力してください',
+  isDisabled,
+  searchTarget = 'label',
+  cssStyle,
+}: Props) {
+  const [searchWord, setSearchWord] = useState(value)
+  const [isOpened, setIsOpened] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  // 親からの value 更新に追従（正本の watch(modelValue, immediate) 相当）
+  const lastValueProp = useRef(value)
+
+  useEffect(() => {
+    if (lastValueProp.current === value) return
+    lastValueProp.current = value
+    setSearchWord(value)
+  }, [value])
+
+  useEffect(() => {
+    const handleClickOutside = (event: PointerEvent) => {
+      const root = rootRef.current
+      if (root && !root.contains(event.target as Node)) setIsOpened(false)
+    }
+
+    document.addEventListener('pointerdown', handleClickOutside)
+    return () => document.removeEventListener('pointerdown', handleClickOutside)
+  }, [])
+
+  const filteredOptions = searchWord
+    ? options.filter((option) =>
+        String(option[searchTarget])
+          .toLowerCase()
+          .includes(searchWord.toLowerCase()),
+      )
+    : options
+
+  const handleInputChange = (newValue: string | number) => {
+    const word = String(newValue)
+    setSearchWord(word)
+
+    if (!word) {
+      setIsOpened(false)
+      return
+    }
+
+    setIsOpened(true)
+    onChange?.(word)
+  }
+
+  const selectOption = (option: Option) => {
+    const newValue = option.value.toString()
+    setSearchWord(newValue)
+    setIsOpened(false)
+    onChange?.(newValue)
+    onSelect?.(newValue)
+  }
+
+  return (
+    <div ref={rootRef} className="relative">
+      <TextBox
+        name={name}
+        value={searchWord}
+        onChange={handleInputChange}
+        isDisabled={isDisabled}
+        placeholder={placeholder}
+        cssStyle={cssStyle}
+      />
+      {isOpened && filteredOptions.length > 0 && (
+        <div className="absolute top-[calc(100%-var(--sp-min,0.1875rem))] left-0 z-[2] max-h-[calc(var(--bv,0.375rem)*56)] min-w-full overflow-auto rounded-[var(--radius-small,0.1875rem)] bg-white py-[var(--sp-small,0.375rem)] shadow-[0_0_6px_#33333333]">
+          {filteredOptions.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              className="block w-full cursor-pointer p-[var(--sp-medium,0.75rem)] text-left text-[length:var(--fs-small,0.6875rem)] text-[var(--link-color,#1c4ac9)] hover:bg-[var(--hover-color,#EEF7FB)] hover:transition-all hover:duration-100"
+              onClick={() => selectOption(option)}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/SelectBox.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { Option, InputBoxStyleForEachStatus, SelectValue } from '../types'
+import { MESSAGES } from '@geckou/ui-core'
+import { Fragment, useEffect, useRef, useState } from 'react'
+import { InputBox } from './InputBox'
+import { ErrorMessage } from './ErrorMessage'
+import { KeyboardArrowDownIcon } from './icons/KeyboardArrowDownIcon'
+
+type Props = {
+  options: Array<Option | Record<string, Option[]>>
+  name: string
+  value?: SelectValue
+  onChange?: (newValue: SelectValue) => void
+  cssStyle?: InputBoxStyleForEachStatus
+  placeholder?: string
+  canOmitSelect?: boolean
+  isDisabled?: boolean
+  isRequired?: boolean
+  arrow?: ReactNode
+}
+
+function isOption(obj: unknown): obj is Option {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'label' in obj &&
+    typeof obj.label === 'string' &&
+    'value' in obj
+  )
+}
+
+export function SelectBox({
+  options,
+  name,
+  value,
+  onChange,
+  cssStyle,
+  placeholder = '選択してください',
+  canOmitSelect,
+  isDisabled,
+  isRequired,
+  arrow,
+}: Props) {
+  const [errorMessages, setErrorMessages] = useState<string[]>([])
+  const selectedValue = value ?? ''
+
+  const validateValue = () => {
+    const messages: string[] = []
+    // 数値 0 も正当な選択値として扱うため、truthy 判定ではなく空文字と比較する
+    if (selectedValue === '' && isRequired) messages.push(MESSAGES.required)
+    setErrorMessages(messages)
+  }
+
+  // Vue 版（@geckou/ui-vue）の watch(immediate: !!modelValue) と等価:
+  // 初期値ありならマウント時にも検証、以後は値が変化したときのみ検証
+  const initialValue = useRef(selectedValue)
+  const hasChanged = useRef(false)
+
+  useEffect(() => {
+    if (!hasChanged.current) {
+      if (selectedValue === initialValue.current) {
+        if (selectedValue !== '') validateValue()
+        return
+      }
+      hasChanged.current = true
+    }
+
+    validateValue()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Vue 版（@geckou/ui-vue）同様、値の変化時のみ検証する
+  }, [selectedValue])
+
+  const flattenedOptions = options.flatMap((option) =>
+    isOption(option) ? [option] : Object.values(option).flat(),
+  )
+
+  const handleChange = (rawValue: string) => {
+    const matched = flattenedOptions.find(
+      (option) => String(option.value) === rawValue,
+    )
+    onChange?.(matched ? matched.value : rawValue)
+  }
+
+  return (
+    <InputBox
+      cssStyle={cssStyle}
+      className="inline-flex [&>select]:flex-auto [&>select]:cursor-pointer [&>select]:pe-8"
+      isDisabled={isDisabled}
+    >
+      <select
+        name={name}
+        value={selectedValue}
+        disabled={isDisabled}
+        required={isRequired}
+        onChange={(event) => handleChange(event.target.value)}
+        onBlur={() => validateValue()}
+      >
+        {canOmitSelect ? (
+          <option value="">{placeholder || '選択しない'}</option>
+        ) : (
+          <option disabled value="">
+            {placeholder || '選択してください'}
+          </option>
+        )}
+        {['0', 'NA'].includes(selectedValue.toString()) && isDisabled && (
+          <option disabled value={selectedValue}>
+            {placeholder || '選択してください'}
+          </option>
+        )}
+        {options.map((option) =>
+          isOption(option) ? (
+            <option
+              key={option.value}
+              value={option.value}
+              disabled={option.isDisabled}
+            >
+              {option.label}
+            </option>
+          ) : (
+            <Fragment key={Object.keys(option)[0]}>
+              {Object.entries(option).map(([key, groupedOptions]) => (
+                <optgroup key={key} label={key}>
+                  {groupedOptions.map((groupedOption) => (
+                    <option
+                      key={groupedOption.value}
+                      value={groupedOption.value}
+                      disabled={groupedOption.isDisabled}
+                    >
+                      {groupedOption.label}
+                    </option>
+                  ))}
+                </optgroup>
+              ))}
+              <hr />
+            </Fragment>
+          ),
+        )}
+      </select>
+      <div className="pointer-events-none absolute inset-y-0 end-2 flex items-center [&>*]:h-4 [&>*]:fill-current [&>*]:text-current">
+        {arrow ?? <KeyboardArrowDownIcon />}
+      </div>
+      <ErrorMessage
+        errorMessages={errorMessages}
+        cssStyle={{
+          textColor: cssStyle?.error?.backgroundColor,
+          backgroundColor: cssStyle?.error?.textColor,
+        }}
+      />
+    </InputBox>
+  )
+}

package/src/components/SlideDownUi.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import type { CSSProperties, ReactNode, Ref } from 'react'
+import { useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { KeyboardArrowDownIcon } from './icons/KeyboardArrowDownIcon'
+import { COLOR } from '../constants'
+
+// Vue 版（@geckou/ui-vue）の defineExpose({ isOpenedContents }) 相当
+export type SlideDownUiHandle = {
+  isOpenedContents: () => boolean
+  close: () => void
+}
+
+type Props = {
+  isOpened?: boolean | null
+  isHiddenArrow?: boolean
+  isDisabled?: boolean
+  isDisableClickOutside?: boolean
+  duration?: number
+  trigger: ReactNode
+  children: ReactNode
+  ref?: Ref<SlideDownUiHandle>
+}
+
+export function SlideDownUi({
+  isOpened = null,
+  isHiddenArrow = false,
+  isDisabled = false,
+  isDisableClickOutside = false,
+  duration = 0.3,
+  trigger,
+  children,
+  ref,
+}: Props) {
+  const [isOpenedContents, setIsOpenedContents] = useState(isOpened || false)
+  const [isOverflowVisible, setIsOverflowVisible] = useState(isOpened || false)
+  const [contentsHeight, setContentsHeight] = useState(0)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const contentsRef = useRef<HTMLDivElement>(null)
+
+  const toggleBox = () => setIsOpenedContents((current) => !current)
+
+  useImperativeHandle(ref, () => ({
+    isOpenedContents: () => isOpenedContents,
+    close: () => setIsOpenedContents(false),
+  }))
+
+  useEffect(() => {
+    if (typeof isOpened === 'boolean') setIsOpenedContents(isOpened)
+  }, [isOpened])
+
+  useEffect(() => {
+    if (isDisableClickOutside) return
+
+    const handleClickOutside = (event: PointerEvent) => {
+      const root = rootRef.current
+      if (root && !root.contains(event.target as Node))
+        {setIsOpenedContents(false)}
+    }
+
+    document.addEventListener('pointerdown', handleClickOutside)
+    return () => document.removeEventListener('pointerdown', handleClickOutside)
+  }, [isDisableClickOutside])
+
+  useEffect(() => {
+    const contentsElement = contentsRef.current
+    if (!contentsElement) return
+
+    const updateContentsHeight = () =>
+      setContentsHeight(contentsElement.clientHeight)
+
+    updateContentsHeight()
+    const observer = new ResizeObserver(updateContentsHeight)
+    observer.observe(contentsElement)
+    return () => observer.disconnect()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- サイズ変化は ResizeObserver が検知するため、マウント時の1回だけ登録する
+  }, [])
+
+  useEffect(() => {
+    if (!isOpenedContents) {
+      setIsOverflowVisible(false)
+      return
+    }
+
+    const timer = setTimeout(() => setIsOverflowVisible(true), duration * 1000)
+    return () => clearTimeout(timer)
+  }, [isOpenedContents, duration])
+
+  const style = { '--link-color': COLOR.blue } as CSSProperties
+
+  return (
+    <div ref={rootRef} style={style}>
+      <button
+        type="button"
+        disabled={isDisabled}
+        aria-expanded={isOpenedContents}
+        className="relative grid w-full cursor-pointer grid-cols-[1fr_auto] items-center justify-items-start text-(--link-color)"
+        onClick={(event) => {
+          event.preventDefault()
+          toggleBox()
+        }}
+      >
+        <div className="w-full text-left">{trigger}</div>
+        {!isHiddenArrow && (
+          <KeyboardArrowDownIcon
+            className={`size-[var(--icon-medium,1.125rem)] flex-none text-(--link-color) transition-all duration-100 ${isOpenedContents ? 'rotate-180' : ''}`}
+          />
+        )}
+      </button>
+      <div
+        style={{
+          height: isOpenedContents ? `${contentsHeight}px` : 0,
+          transitionDuration: `${duration}s`,
+          overflow: isOverflowVisible ? 'visible' : 'hidden',
+        }}
+        inert={!isOpenedContents}
+        className="transition-[height]"
+      >
+        <div ref={contentsRef}>{children}</div>
+      </div>
+    </div>
+  )
+}