@geckou/ui-react 0.1.1 → 0.2.0

package/src/components/TabUI.tsx

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

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

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

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

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

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

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

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

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

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

package/src/hooks/useFormValidation.ts

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

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

package/src/types/index.ts

@@ -1,23 +0,0 @@
-// フォーム部品の型は @geckou/ui-core が正。Vue / React で共通のため、ここでは再エクスポートのみ行う
-export type {
-  StateVariation,
-  BorderStyle,
-  BaseStyle,
-  StyleForEachStatus,
-  InputBoxStyle,
-  InputBoxStyleForEachStatus,
-  ButtonStyle,
-  ButtonStyleForEachStatus,
-  CheckBoxStyle,
-  CheckBoxStyleForEachStatus,
-  RadioButtonStyle,
-  RadioButtonStyleForEachStatus,
-  SelectValue,
-  Option,
-  Validate,
-  Validates,
-  InputValue,
-  DateObject,
-  DateType,
-  ValidationResult,
-} from '@geckou/ui-core'