@geckou/ui-react 0.1.0

package/src/components/TabUI.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import type { CSSProperties, KeyboardEvent, ReactNode } from 'react'
+import { useId, useRef, useState } from 'react'
+import { COLOR } from '../constants'
+
+type Tab = {
+  key: string
+  label: string
+}
+
+type Props = {
+  tabs: Tab[]
+  color?: {
+    active: string
+    background: string
+    text: string
+  }
+  type?: 'tab' | 'button' | 'border'
+  initialIndex?: number
+  tabSlots?: Record<string, ReactNode>
+  panelSlots?: Record<string, ReactNode>
+}
+
+export function TabUI({
+  tabs,
+  color,
+  initialIndex = 0,
+  tabSlots,
+  panelSlots,
+}: Props) {
+  const [activeTab, setActiveTab] = useState(
+    () => tabs[initialIndex]?.key ?? tabs[0]?.key ?? '',
+  )
+  const tabRefs = useRef<Array<HTMLButtonElement | null>>([])
+  // 複数インスタンス設置時の DOM id 重複を避ける
+  const uid = useId()
+  const tabId = (key: string) => `${uid}-tab-${key}`
+  const panelId = (key: string) => `${uid}-panel-${key}`
+
+  const changeTabs = (key: string) => setActiveTab(key)
+
+  const activateTab = (index: number) => {
+    setActiveTab(tabs[index].key)
+    tabRefs.current[index]?.focus()
+  }
+
+  // Vue 版（@geckou/ui-vue）は window 全体に keydown を張っていたため、フォーカス位置と
+  // 無関係にタブが切り替わり複数設置時に競合した。タブリストにフォーカスが
+  // あるときだけ矢印キーで移動する（WAI-ARIA Tabs パターン）
+  const handleKeydown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+
+    const currentIndex = tabs.findIndex((tab) => tab.key === activeTab)
+    if (currentIndex === -1) return
+
+    event.preventDefault()
+    const lastIndex = tabs.length - 1
+
+    if (event.key === 'ArrowLeft') {
+      activateTab(currentIndex > 0 ? currentIndex - 1 : lastIndex)
+    } else {
+      activateTab(currentIndex < lastIndex ? currentIndex + 1 : 0)
+    }
+  }
+
+  const style = {
+    '--active-color': color?.active || COLOR.blue,
+    '--background-color': color?.background || 'transparent',
+  } as CSSProperties
+
+  return (
+    <div>
+      <div
+        style={style}
+        className="flex bg-(--background-color)"
+        role="tablist"
+        onKeyDown={handleKeydown}
+      >
+        {tabs.map((tab, index) => (
+          <button
+            key={tab.key}
+            id={tabId(tab.key)}
+            ref={(el) => {
+              tabRefs.current[index] = el
+            }}
+            type="button"
+            role="tab"
+            aria-controls={panelId(tab.key)}
+            aria-selected={activeTab === tab.key}
+            tabIndex={activeTab === tab.key ? 0 : -1}
+            className={`border-none bg-transparent px-4 py-2 text-base ${activeTab === tab.key ? 'cursor-auto' : 'cursor-pointer'}`}
+            onClick={() => changeTabs(tab.key)}
+          >
+            {tabSlots?.[tab.key] ?? tab.label}
+          </button>
+        ))}
+      </div>
+      {tabs.map((tab) => (
+        <div
+          key={`${tab.key}_panel`}
+          id={panelId(tab.key)}
+          role="tabpanel"
+          aria-labelledby={tabId(tab.key)}
+          hidden={activeTab !== tab.key}
+        >
+          {panelSlots?.[`${tab.key}Contents`]}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/TextArea.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import type { InputBoxStyleForEachStatus, Validates } from '../types'
+import { isEmptyValue, validateInputValue } from '@geckou/ui-core'
+import { useEffect, useRef, useState } from 'react'
+import { InputBox } from './InputBox'
+import { ErrorMessage } from './ErrorMessage'
+
+type InputValue = string | null
+
+type Props = {
+  name: string
+  value?: InputValue
+  onChange?: (newValue: InputValue) => void
+  cssStyle?: InputBoxStyleForEachStatus
+  placeholder?: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  rows?: number
+  maxLength?: number
+  autocomplete?: string
+  validates?: Validates
+  autoAdjustHeight?: boolean
+}
+
+export function TextArea({
+  name,
+  value,
+  onChange,
+  cssStyle,
+  placeholder = '入力してください',
+  isDisabled,
+  isRequired,
+  rows,
+  maxLength = 100,
+  autocomplete = 'off',
+  validates = [],
+  autoAdjustHeight,
+}: Props) {
+  const [errorMessages, setErrorMessages] = useState<string[]>([])
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const inputValue = value ?? ''
+
+  const validateValue = () => {
+    setErrorMessages(validateInputValue(inputValue, { isRequired, validates }))
+  }
+
+  // Vue 版（@geckou/ui-vue）の watch(immediate: !!modelValue) と等価:
+  // 初期値ありならマウント時にも検証、以後は値が変化したときのみ検証
+  const initialValue = useRef(inputValue)
+  const hasChanged = useRef(false)
+
+  useEffect(() => {
+    if (autoAdjustHeight && textareaRef.current) {
+      textareaRef.current.style.height = 'auto'
+      textareaRef.current.style.height = `calc(${textareaRef.current.scrollHeight}px - 2rem)`
+    }
+
+    if (!hasChanged.current) {
+      if (inputValue === initialValue.current) {
+        // 数値 0 も初期値として扱うため truthy 判定は使わない
+        if (!isEmptyValue(inputValue)) validateValue()
+        return
+      }
+      hasChanged.current = true
+    }
+
+    validateValue()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Vue 版（@geckou/ui-vue）同様、値の変化時のみ検証・高さ調整する
+  }, [inputValue])
+
+  return (
+    <InputBox
+      cssStyle={cssStyle}
+      className="min-h-[4em]"
+      isErrored={!!errorMessages.length}
+      isDisabled={isDisabled}
+    >
+      <textarea
+        ref={textareaRef}
+        name={name}
+        value={inputValue}
+        required={isRequired}
+        placeholder={placeholder}
+        disabled={isDisabled}
+        autoComplete={autocomplete}
+        rows={rows}
+        maxLength={maxLength}
+        aria-invalid={errorMessages.length ? 'true' : undefined}
+        onChange={(event) => onChange?.(event.target.value)}
+        onBlur={() => validateValue()}
+      />
+      <ErrorMessage
+        errorMessages={errorMessages}
+        cssStyle={{
+          textColor: cssStyle?.error?.backgroundColor,
+          backgroundColor: cssStyle?.error?.textColor,
+        }}
+      />
+    </InputBox>
+  )
+}

package/src/components/TextBox.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { InputBoxStyleForEachStatus, Validates } from '../types'
+import {
+  convertFullWidthToHalfWidth,
+  isEmptyValue,
+  validateInputValue,
+} from '@geckou/ui-core'
+import { useEffect, useRef, useState } from 'react'
+import { InputBox } from './InputBox'
+import { ErrorMessage } from './ErrorMessage'
+
+type InputValue = string | number
+
+type Props = {
+  name: string
+  value?: InputValue
+  onChange?: (newValue: InputValue) => void
+  cssStyle?: InputBoxStyleForEachStatus
+  inputType?: string
+  placeholder?: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  maxLength?: number
+  autocomplete?: string
+  validates?: Validates
+  before?: ReactNode
+  after?: ReactNode
+}
+
+export function TextBox({
+  name,
+  value,
+  onChange,
+  cssStyle,
+  inputType = 'text',
+  placeholder = '入力してください',
+  isDisabled,
+  isRequired,
+  maxLength = 30,
+  autocomplete = 'off',
+  validates = [],
+  before,
+  after,
+}: Props) {
+  const [errorMessages, setErrorMessages] = useState<string[]>([])
+  const inputValue = value ?? ''
+
+  const validateValue = () => {
+    setErrorMessages(validateInputValue(inputValue, { isRequired, validates }))
+  }
+
+  // Vue 版（@geckou/ui-vue）の watch(immediate: !!modelValue) と等価:
+  // 初期値ありならマウント時にも検証、以後は値が変化したときのみ検証
+  const initialValue = useRef(inputValue)
+  const hasChanged = useRef(false)
+
+  useEffect(() => {
+    if (!hasChanged.current) {
+      if (inputValue === initialValue.current) {
+        if (!isEmptyValue(inputValue)) validateValue()
+        return
+      }
+      hasChanged.current = true
+    }
+
+    validateValue()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Vue 版（@geckou/ui-vue）同様、値の変化時のみ検証する
+  }, [inputValue])
+
+  const isComposing = useRef(false)
+
+  return (
+    <InputBox
+      cssStyle={cssStyle}
+      className="inline-flex [&>input]:flex-auto"
+      isErrored={!!errorMessages.length}
+      isDisabled={isDisabled}
+    >
+      {before}
+      <input
+        type={inputType}
+        name={name}
+        value={inputValue}
+        required={isRequired}
+        placeholder={placeholder}
+        disabled={isDisabled}
+        autoComplete={autocomplete}
+        maxLength={maxLength}
+        aria-invalid={errorMessages.length ? 'true' : undefined}
+        onChange={(event) => {
+          // IME 変換中に全角→半角変換すると未確定文字列が壊れるため、確定後に変換する
+          const rawValue = event.target.value
+          onChange?.(
+            isComposing.current
+              ? rawValue
+              : convertFullWidthToHalfWidth(rawValue),
+          )
+        }}
+        onCompositionStart={() => {
+          isComposing.current = true
+        }}
+        onCompositionEnd={(event) => {
+          isComposing.current = false
+          onChange?.(convertFullWidthToHalfWidth(event.currentTarget.value))
+        }}
+        onBlur={() => validateValue()}
+      />
+      {after}
+      <ErrorMessage
+        errorMessages={errorMessages}
+        cssStyle={{
+          textColor: cssStyle?.error?.backgroundColor,
+          backgroundColor: cssStyle?.error?.textColor,
+        }}
+      />
+    </InputBox>
+  )
+}

package/src/components/ToggleButton.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import type { CSSProperties } from 'react'
+import type { BaseStyle, StyleForEachStatus } from '../types'
+import { COLOR } from '../constants'
+
+type ToggleStyle = {
+  on: BaseStyle
+  off: BaseStyle
+}
+
+type Props = {
+  name: string
+  label?: Record<'on' | 'off', string>
+  checked?: boolean
+  onChange?: (newValue: boolean) => void
+  isDisabled?: boolean
+  cssStyle?: StyleForEachStatus<ToggleStyle>
+}
+
+export function ToggleButton({
+  name,
+  label = { on: 'ON', off: 'OFF' },
+  checked,
+  onChange,
+  isDisabled,
+  cssStyle,
+}: Props) {
+  const isChecked = checked ?? false
+  const maxTextLength = Math.max(label.on.length, label.off.length)
+  const baseStyle = isDisabled ? cssStyle?.disabled : cssStyle?.default
+
+  const currentCssStyle = {
+    on: {
+      textColor: isDisabled ? COLOR.lightGray : COLOR.white,
+      backgroundColor: isDisabled ? COLOR.gray : COLOR.blue,
+      border: {
+        color: isDisabled ? COLOR.gray : COLOR.blue,
+        size: '1px',
+        radius: '.25rem',
+      },
+      boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
+      ...baseStyle?.on,
+    },
+    off: {
+      textColor: isDisabled ? COLOR.gray : COLOR.white,
+      backgroundColor: isDisabled ? COLOR.lightGray : COLOR.darkGray,
+      border: {
+        color: isDisabled ? COLOR.gray : COLOR.darkGray,
+        size: '1px',
+        radius: '.25rem',
+      },
+      boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
+      ...baseStyle?.off,
+    },
+  }[isChecked ? 'on' : 'off']
+
+  const style = {
+    '--text-color': currentCssStyle.textColor,
+    '--border-color': currentCssStyle.border?.color,
+    '--border-size': currentCssStyle.border?.size,
+    '--radius-size': currentCssStyle.border?.radius,
+    '--background-color': currentCssStyle.backgroundColor,
+    '--box-shadow': currentCssStyle.boxShadow,
+    '--inline-size': `${maxTextLength * 2}ch`,
+    '--handle-size': '1.5rem',
+    '--padding-size': 'calc(var(--border-size) + 2px)',
+    '--duration': '.15s',
+  } as CSSProperties
+
+  return (
+    <button
+      type="button"
+      style={style}
+      disabled={isDisabled}
+      aria-pressed={isChecked}
+      aria-label={name}
+      onClick={(event) => {
+        event.stopPropagation()
+        if (!isDisabled) onChange?.(!isChecked)
+      }}
+      className="relative inline-block w-[calc(var(--inline-size)+var(--handle-size)+(var(--padding-size)*2))] cursor-pointer rounded-(--radius-size) border-none bg-(--background-color) p-(--padding-size) shadow-[0_0_0_var(--border-size)_var(--border-color)_inset,var(--box-shadow)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--border-color)"
+    >
+      <input
+        type="checkbox"
+        name={name}
+        checked={isChecked}
+        disabled={isDisabled}
+        readOnly
+        className="hidden"
+      />
+      <div
+        data-on={label.on}
+        data-off={label.off}
+        className={`absolute top-0 left-0 h-full w-full text-(--text-color) uppercase before:absolute before:right-0 before:m-auto before:inline-flex before:h-full before:w-[calc(100%-var(--handle-size)-var(--padding-size))] before:items-center before:justify-center before:leading-none before:transition-opacity before:duration-(--duration) before:ease-out before:content-[attr(data-off)] after:absolute after:left-0 after:m-auto after:inline-flex after:h-full after:w-[calc(100%-var(--handle-size)-var(--padding-size))] after:items-center after:justify-center after:leading-none after:transition-opacity after:duration-(--duration) after:ease-out after:content-[attr(data-on)] ${isChecked ? 'before:opacity-0 after:opacity-100' : 'before:opacity-100 after:opacity-0'}`}
+      />
+      <div
+        className={`relative m-0 aspect-square w-(--handle-size) rounded-[calc(var(--radius-size)-(var(--padding-size)/2))] bg-(--text-color) shadow-(--box-shadow) transition-[left] duration-(--duration) ease-out ${isChecked ? 'left-[calc(100%-var(--handle-size))]' : 'left-0'}`}
+      />
+    </button>
+  )
+}

package/src/components/icons/BackupIcon.tsx

@@ -0,0 +1,16 @@
+type Props = {
+  className?: string
+}
+
+export function BackupIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H520q-33 0-56.5-23.5T440-240v-206l-64 62-56-56 160-160 160 160-56 56-64-62v206h220q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41h100v80H260Z" />
+    </svg>
+  )
+}

package/src/components/icons/CalendarIcon.tsx

@@ -0,0 +1,15 @@
+type Props = {
+  className?: string
+}
+
+export function CalendarIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      className={className}
+    >
+      <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Z" />
+    </svg>
+  )
+}

package/src/components/icons/CheckIcon.tsx

@@ -0,0 +1,7 @@
+export function CheckIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+      <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
+    </svg>
+  )
+}

package/src/components/icons/CloseIcon.tsx

@@ -0,0 +1,16 @@
+type Props = {
+  className?: string
+}
+
+export function CloseIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      fill="currentColor"
+      className={className}
+    >
+      <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>
+  )
+}

package/src/components/icons/KeyboardArrowDownIcon.tsx

@@ -0,0 +1,16 @@
+type Props = {
+  className?: string
+}
+
+export function KeyboardArrowDownIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
+    </svg>
+  )
+}

package/src/constants/index.ts

@@ -0,0 +1,2 @@
+// 配色は @geckou/ui-core が正。Vue / React で共通のため再エクスポートのみ行う
+export { COLOR, BORDER, MESSAGES, INPUT_BOX_DEFAULT_STYLES } from '@geckou/ui-core'

package/src/hooks/useFormValidation.ts

@@ -0,0 +1,69 @@
+'use client'
+
+import { useEffect, useMemo, useSyncExternalStore } from 'react'
+import { createFormValidationStore } from '@geckou/ui-core'
+import type { FormValidationStore } from '@geckou/ui-core'
+
+export type UseFormValidationResult = {
+  /** 登録済みの入力がすべて有効かどうか */
+  isAllValid: boolean
+  /** 無効になっている入力の name 一覧 */
+  invalidNames: string[]
+  /** 入力の状態を登録・更新する */
+  setValid: FormValidationStore['setValid']
+  /** 管理対象から外す */
+  remove: FormValidationStore['remove']
+  /** すべての状態を破棄する */
+  reset: FormValidationStore['reset']
+  /** 子コンポーネントへ直接渡すためのストア本体 */
+  store: FormValidationStore
+}
+
+/**
+ * フォーム内の各入力のバリデーション状態をまとめて管理する。
+ *
+ * 状態そのものは @geckou/ui-core の createFormValidationStore が持つため、
+ * 判定ロジックは Vue 実装（@geckou/ui-vue の FormValidationManager）と共有される。
+ *
+ * ```tsx
+ * const { isAllValid, store } = useFormValidation()
+ * // <DatePicker name="startedOn" formValidationStore={store} />
+ * <button disabled={!isAllValid}>送信</button>
+ * ```
+ */
+export function useFormValidation(): UseFormValidationResult {
+  const store = useMemo(() => createFormValidationStore(), [])
+  const snapshot = useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    // SSR 時は登録がまだ無いので、すべて有効なスナップショットを返す
+    store.getSnapshot,
+  )
+
+  return {
+    isAllValid: snapshot.isAllValid,
+    invalidNames: snapshot.invalidNames,
+    setValid: store.setValid,
+    remove: store.remove,
+    reset: store.reset,
+    store,
+  }
+}
+
+/**
+ * 入力コンポーネント側から検証結果をストアへ通知する。
+ * アンマウント時には登録を解除し、無効判定が残らないようにする。
+ */
+export function useRegisterValidation(
+  store: FormValidationStore | null | undefined,
+  name: string,
+  isValid: boolean,
+): void {
+  useEffect(() => {
+    store?.setValid(name, isValid)
+  }, [store, name, isValid])
+
+  useEffect(() => {
+    return () => store?.remove(name)
+  }, [store, name])
+}

package/src/index.ts

@@ -0,0 +1,66 @@
+export { BasicButton } from './components/BasicButton'
+export { CheckBox } from './components/CheckBox'
+export { CheckBoxes } from './components/CheckBoxes'
+export { CheckButton } from './components/CheckButton'
+export { DatePicker } from './components/DatePicker'
+export { DateRangePicker } from './components/DateRangePicker'
+export { DateSelector } from './components/DateSelector'
+export { DropdownUi } from './components/DropdownUi'
+export type { DropdownUiHandle } from './components/DropdownUi'
+export { ErrorMessage } from './components/ErrorMessage'
+export { FileInput } from './components/FileInput'
+export { InputBox } from './components/InputBox'
+export { InputGroup } from './components/InputGroup'
+export { LabeledCheckbox } from './components/LabeledCheckbox'
+export { LabeledFieldset } from './components/LabeledFieldset'
+export { LoadingSpinner } from './components/LoadingSpinner'
+export { ModalBox } from './components/ModalBox'
+export { PopupBox } from './components/PopupBox'
+export type { PopupBoxHandle } from './components/PopupBox'
+export { RadioButtons } from './components/RadioButtons'
+export { SearchableSelectBox } from './components/SearchableSelectBox'
+export { SelectBox } from './components/SelectBox'
+export { SlideDownUi } from './components/SlideDownUi'
+export type { SlideDownUiHandle } from './components/SlideDownUi'
+export { TabUI } from './components/TabUI'
+export { TextArea } from './components/TextArea'
+export { TextBox } from './components/TextBox'
+export { ToggleButton } from './components/ToggleButton'
+
+export { BackupIcon } from './components/icons/BackupIcon'
+export { CheckIcon } from './components/icons/CheckIcon'
+export { CloseIcon } from './components/icons/CloseIcon'
+export { CalendarIcon } from './components/icons/CalendarIcon'
+export { KeyboardArrowDownIcon } from './components/icons/KeyboardArrowDownIcon'
+
+export {
+  useFormValidation,
+  useRegisterValidation,
+} from './hooks/useFormValidation'
+export type { UseFormValidationResult } from './hooks/useFormValidation'
+
+export { COLOR, BORDER, MESSAGES, INPUT_BOX_DEFAULT_STYLES } from './constants'
+export type {
+  StateVariation,
+  BorderStyle,
+  BaseStyle,
+  StyleForEachStatus,
+  InputBoxStyle,
+  InputBoxStyleForEachStatus,
+  ButtonStyle,
+  ButtonStyleForEachStatus,
+  CheckBoxStyle,
+  CheckBoxStyleForEachStatus,
+  RadioButtonStyle,
+  RadioButtonStyleForEachStatus,
+  SelectValue,
+  Option,
+  Validate,
+  Validates,
+  InputValue,
+  DateObject,
+  DateType,
+  ValidationResult,
+} from './types'
+
+export type { FormValidationStore } from '@geckou/ui-core'