@geckou/ui-react 0.1.0 → 0.2.0

package/src/components/BasicButton.tsx

@@ -1,81 +0,0 @@
-'use client'
-
-import type { CSSProperties, MouseEventHandler, ReactNode } from 'react'
-import type { ButtonStyleForEachStatus } from '../types'
-import { LoadingSpinner } from './LoadingSpinner'
-import { COLOR } from '../constants'
-
-type Props = {
-  cssStyle?: ButtonStyleForEachStatus
-  duration?: number
-  isLoading?: boolean
-  isDisabled?: boolean
-  buttonType?: 'button' | 'submit' | 'reset'
-  onClick?: MouseEventHandler<HTMLButtonElement>
-  loading?: ReactNode
-  children?: ReactNode
-}
-
-export function BasicButton({
-  cssStyle,
-  duration = 0.3,
-  isLoading,
-  isDisabled,
-  buttonType = 'button',
-  onClick,
-  loading,
-  children,
-}: Props) {
-  const baseStyle = isDisabled ? cssStyle?.disabled : cssStyle?.default
-
-  const currentCssStyle = {
-    textColor: COLOR.white,
-    backgroundColor: isDisabled ? COLOR.darkGray : COLOR.blue,
-    backgroundImage: 'none',
-    border: {
-      color: isDisabled ? COLOR.darkGray : COLOR.blue,
-      size: '1px',
-      radius: '.25rem',
-    },
-    boxShadow: '0 0 0 0 transparent',
-    ...baseStyle,
-  }
-
-  const hoverStyle = cssStyle?.hover || {}
-
-  const style = {
-    '--text-color': currentCssStyle.textColor,
-    '--background-color': currentCssStyle.backgroundColor,
-    '--background-image': currentCssStyle.backgroundImage,
-    '--radius-size': currentCssStyle.border?.radius,
-    '--button-shadow': `0 0 0 ${currentCssStyle.border?.size} ${currentCssStyle.border?.color} inset, ${currentCssStyle.boxShadow}`,
-    '--hover-text-color': hoverStyle.textColor || currentCssStyle.textColor,
-    '--hover-background-color':
-      hoverStyle.backgroundColor ||
-      (currentCssStyle.backgroundColor &&
-        `${currentCssStyle.backgroundColor}cc`),
-    '--hover-background-image':
-      hoverStyle.backgroundImage || currentCssStyle.backgroundImage,
-    '--hover-radius-size':
-      hoverStyle.border?.radius || currentCssStyle.border?.radius,
-    '--hover-button-shadow': `0 0 0 ${hoverStyle.border?.size || currentCssStyle.border?.size} ${hoverStyle.border?.color || currentCssStyle.border?.color} inset, ${hoverStyle.boxShadow || currentCssStyle.boxShadow}`,
-    '--duration': `${duration}s`,
-  } as CSSProperties
-
-  return (
-    <button
-      type={buttonType}
-      disabled={isDisabled || isLoading}
-      onClick={onClick}
-      style={style}
-      className="relative inline-flex w-max cursor-pointer items-center justify-center rounded-(--radius-size) border-none bg-(--background-color) px-8 py-4 leading-none text-(--text-color) shadow-(--button-shadow) transition-all duration-(--duration) enabled:hover:rounded-(--hover-radius-size) enabled:hover:bg-(--hover-background-color) enabled:hover:text-(--hover-text-color) enabled:hover:shadow-(--hover-button-shadow) disabled:pointer-events-none disabled:before:pointer-events-auto disabled:before:absolute disabled:before:inset-0 disabled:before:cursor-not-allowed disabled:before:content-['']"
-    >
-      {isLoading && (
-        <span className="absolute inset-0 m-auto flex max-h-[calc(100%-1.5rem)] items-center justify-center fill-current text-current [&_*]:max-h-full [&_*]:fill-current">
-          {loading ?? <LoadingSpinner />}
-        </span>
-      )}
-      <span className={isLoading ? 'invisible' : undefined}>{children}</span>
-    </button>
-  )
-}

package/src/components/CheckBox.tsx

@@ -1,87 +0,0 @@
-'use client'
-
-import type { CSSProperties, ReactNode } from 'react'
-import type { CheckBoxStyleForEachStatus } from '../types'
-import { CheckIcon } from './icons/CheckIcon'
-import { COLOR } from '../constants'
-
-type Props = {
-  name: string
-  checked?: boolean
-  onChange?: (newValue: boolean) => void
-  isDisabled?: boolean
-  cssStyle?: CheckBoxStyleForEachStatus
-  isDisableAnimation?: boolean
-  check?: ReactNode
-}
-
-export function CheckBox({
-  name,
-  checked,
-  onChange,
-  isDisabled,
-  cssStyle,
-  isDisableAnimation,
-  check,
-}: Props) {
-  const isChecked = checked ?? false
-  const baseStyle = isDisabled ? cssStyle?.disabled : cssStyle?.default
-
-  const currentCssStyle = {
-    textColor: isDisabled ? COLOR.darkGray : COLOR.blue,
-    backgroundColor: isDisabled ? COLOR.lightGray : COLOR.white,
-    border: {
-      color: isDisabled ? COLOR.darkGray : COLOR.blue,
-      size: '1px',
-      radius: '.25rem',
-    },
-    ...baseStyle,
-  }
-
-  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,
-    '--duration': isDisableAnimation ? '0s' : '.3s',
-  } as CSSProperties
-
-  return (
-    <>
-      <style>
-        {
-          '@keyframes uiCheckPop{0%{scale:1}10%{scale:.8}50%{scale:1.1}100%{scale:1}}'
-        }
-      </style>
-      <button
-        type="button"
-        style={style}
-        aria-label={name}
-        aria-pressed={isChecked}
-        disabled={isDisabled}
-        onClick={(event) => {
-          event.stopPropagation()
-          if (!isDisabled) onChange?.(!isChecked)
-        }}
-        className={`relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-(--radius-size) border-none shadow-[0_0_0_var(--border-size)_var(--border-color)_inset] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--border-color) has-[input:disabled]:pointer-events-none has-[input:disabled]:before:pointer-events-auto has-[input:disabled]:before:absolute has-[input:disabled]:before:inset-0 has-[input:disabled]:before:cursor-not-allowed has-[input:disabled]:before:content-[''] ${isChecked ? 'animate-[uiCheckPop_var(--duration)_ease-out] bg-(--border-color)' : 'bg-(--background-color)'}`}
-      >
-        <input
-          type="checkbox"
-          name={name}
-          checked={isChecked}
-          disabled={isDisabled}
-          onChange={(event) => {
-            if (!isDisabled) onChange?.(event.target.checked)
-          }}
-          className="hidden"
-        />
-        <div
-          className={`flex h-4 w-4 items-center justify-center [&>*]:fill-current [&>*]:text-current ${isChecked ? 'text-(--background-color)' : 'text-(--border-color)'}`}
-        >
-          {check ?? <CheckIcon />}
-        </div>
-      </button>
-    </>
-  )
-}

package/src/components/CheckBoxes.tsx

@@ -1,93 +0,0 @@
-'use client'
-
-import type { Option, CheckBoxStyleForEachStatus } from '../types'
-import { MESSAGES } from '@geckou/ui-core'
-import { useEffect, useRef, useState } from 'react'
-import { LabeledCheckbox } from './LabeledCheckbox'
-import { ErrorMessage } from './ErrorMessage'
-import { COLOR } from '../constants'
-
-type Props = {
-  name: string
-  options: Option[]
-  value?: string[]
-  onChange?: (newValue: string[]) => void
-  isDisabled?: boolean
-  isRequired?: boolean
-  cssStyle?: CheckBoxStyleForEachStatus
-}
-
-export function CheckBoxes({
-  name,
-  options,
-  value,
-  onChange,
-  isDisabled,
-  isRequired,
-  cssStyle,
-}: Props) {
-  const [checkedValues, setCheckedValues] = useState<string[]>(value ?? [])
-  const [errorMessage, setErrorMessage] = useState('')
-
-  const validateInput = (newValues: string[]) =>
-    setErrorMessage(isRequired && newValues.length === 0 ? MESSAGES.required : '')
-
-  const isFirstRender = useRef(true)
-
-  useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false
-      if (value?.length) validateInput(value)
-      return
-    }
-
-    if (value) setCheckedValues(value)
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- Vue 版（@geckou/ui-vue）同様、外部からの値変更時のみ同期する
-  }, [value])
-
-  const toggleValue = (optionValue: string, checked: boolean) => {
-    const newValues = options
-      .map((option) => String(option.value))
-      .filter((candidate) =>
-        candidate === optionValue ? checked : checkedValues.includes(candidate),
-      )
-
-    setCheckedValues(newValues)
-    validateInput(newValues)
-    onChange?.(newValues)
-  }
-
-  const errorColor = {
-    ...(cssStyle?.error ?? {}),
-    textColor: COLOR.white,
-    backgroundColor: COLOR.red,
-    border: {
-      color: COLOR.red,
-      size: '1px',
-      radius: '.25rem',
-    },
-  }
-
-  return (
-    <div className="relative flex flex-wrap gap-x-6 gap-y-4">
-      {options.map((option) => (
-        <LabeledCheckbox
-          key={option.value}
-          name={name}
-          label={option.label}
-          checked={checkedValues.includes(String(option.value))}
-          onChange={(checked) => toggleValue(String(option.value), checked)}
-          isDisabled={isDisabled}
-          cssStyle={cssStyle}
-        />
-      ))}
-      <ErrorMessage
-        errorMessages={errorMessage ? [errorMessage] : []}
-        cssStyle={{
-          textColor: errorColor.textColor,
-          backgroundColor: errorColor.backgroundColor,
-        }}
-      />
-    </div>
-  )
-}

package/src/components/CheckButton.tsx

@@ -1,66 +0,0 @@
-'use client'
-
-import type { CSSProperties, ReactNode } from 'react'
-import type { CheckBoxStyleForEachStatus } from '../types'
-import { CheckIcon } from './icons/CheckIcon'
-
-type Props = {
-  name: string
-  checked?: boolean
-  onChange?: (newValue: boolean) => void
-  isDisabled?: boolean
-  cssStyle?: CheckBoxStyleForEachStatus
-  isDisableAnimation?: boolean
-  check?: ReactNode
-}
-
-export function CheckButton({
-  name,
-  checked,
-  onChange,
-  isDisabled,
-  cssStyle = { default: {} },
-  isDisableAnimation,
-  check,
-}: Props) {
-  const isChecked = checked ?? false
-  const currentCssStyle = isDisabled ? cssStyle.disabled : cssStyle.default
-
-  const style = {
-    '--border-color': currentCssStyle?.border?.color || 'blue',
-    '--border-size': currentCssStyle?.border?.size || '1px',
-    '--radius-size': currentCssStyle?.border?.radius || '0.25rem',
-    '--background-color': currentCssStyle?.backgroundColor || '#fff',
-    '--duration': isDisableAnimation ? '0s' : '.3s',
-  } as CSSProperties
-
-  return (
-    <>
-      <style>
-        {
-          '@keyframes uiCheckPop{0%{scale:1}10%{scale:.8}50%{scale:1.1}100%{scale:1}}'
-        }
-      </style>
-      <label
-        style={style}
-        className={`relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-(--radius-size) shadow-[0_0_0_var(--border-size)_var(--border-color)_inset] has-[input:disabled]:pointer-events-none has-[input:disabled]:before:pointer-events-auto has-[input:disabled]:before:absolute has-[input:disabled]:before:inset-0 has-[input:disabled]:before:cursor-not-allowed has-[input:disabled]:before:content-[''] has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-(--border-color) ${isChecked ? 'animate-[uiCheckPop_var(--duration)_ease-out] bg-(--border-color)' : 'bg-(--background-color)'}`}
-      >
-        <input
-          type="checkbox"
-          name={name}
-          checked={isChecked}
-          disabled={isDisabled}
-          onChange={(event) => {
-            if (!isDisabled) onChange?.(event.target.checked)
-          }}
-          className="sr-only"
-        />
-        <div
-          className={`flex h-4 w-4 items-center justify-center [&>*]:fill-current [&>*]:text-current ${isChecked ? 'text-(--background-color)' : 'text-(--border-color)'}`}
-        >
-          {check ?? <CheckIcon />}
-        </div>
-      </label>
-    </>
-  )
-}

package/src/components/DatePicker.tsx

@@ -1,154 +0,0 @@
-'use client'
-
-import type { CSSProperties } from 'react'
-import type { DateObject, InputBoxStyleForEachStatus } from '../types'
-import {
-  MESSAGES,
-  composeDateValue,
-  formatDateValue,
-  splitDate,
-  validateDateObject,
-} from '@geckou/ui-core'
-import { useEffect, useRef, useState } from 'react'
-import { InputBox } from './InputBox'
-import { ErrorMessage } from './ErrorMessage'
-import { CalendarIcon } from './icons/CalendarIcon'
-import { COLOR } from '../constants'
-
-type Props = {
-  name: string
-  value?: string
-  onChange?: (newValue: string) => void
-  cssStyle?: InputBoxStyleForEachStatus
-  isDisabled?: boolean
-  isRequired?: boolean
-  minDate?: string
-  maxDate?: string
-  size?: 'small' | 'medium'
-  type?: 'date' | 'month'
-}
-
-export function DatePicker({
-  name,
-  value,
-  onChange,
-  cssStyle,
-  isDisabled,
-  isRequired,
-  minDate = '',
-  maxDate = '',
-  size = 'medium',
-  type = 'date',
-}: Props) {
-  const [dateValue, setDateValue] = useState(() =>
-    value ? formatDateValue(value, type) : '',
-  )
-  const [dateObject, setDateObject] = useState<DateObject>(() =>
-    value ? splitDate(formatDateValue(value, type)) : { year: '', month: '', day: '' },
-  )
-  const [errorMessage, setErrorMessage] = useState('')
-
-  // prop が実際に変わったときだけ同期する（内部編集を上書きしないため）
-  const lastValueProp = useRef(value)
-
-  useEffect(() => {
-    if (lastValueProp.current === value) return
-    lastValueProp.current = value
-
-    const normalized = value ? formatDateValue(value, type) : ''
-    setDateValue(normalized)
-    setDateObject(splitDate(normalized))
-  }, [value, type])
-
-  const validateInput = (newValue: string) => {
-    if (!newValue && isRequired)
-      {return { isValid: false, message: MESSAGES.required }}
-    return { isValid: true, message: '' }
-  }
-
-  const validateObject = (object: DateObject) =>
-    validateDateObject(object, { type, isRequired })
-
-  const handleDateValueChange = (newValue: string) => {
-    setDateValue(newValue)
-    setDateObject(splitDate(newValue))
-    const { message } = validateInput(newValue)
-    setErrorMessage(message)
-    onChange?.(newValue)
-  }
-
-  const handleObjectChange = (key: keyof DateObject, newValue: string) => {
-    const next = { ...dateObject, [key]: newValue }
-    setDateObject(next)
-    const { isValid, message } = validateObject(next)
-    setErrorMessage(message)
-
-    if (isValid) {
-      const joined = composeDateValue(next, type)
-      setDateValue(joined)
-      onChange?.(joined)
-    }
-  }
-
-  const isSmall = size === 'small'
-  const textInputClass = `flex-none! ${isSmall ? 'px-[var(--sp-small,0.375rem)]! py-[var(--sp-min,0.1875rem)]! text-[length:var(--fs-small,0.6875rem)]' : 'p-[var(--sp-medium,0.75rem)]!'}`
-  const iconStyle = { '--icon-color': COLOR.blue } as CSSProperties
-
-  return (
-    <InputBox
-      cssStyle={cssStyle}
-      isDisabled={isDisabled}
-      isErrored={!!errorMessage}
-      className={`flex w-full items-center leading-none ${isSmall ? 'h-[calc(var(--bv,0.375rem)*5)] px-[var(--sp-min,0.1875rem)]' : 'h-[calc(var(--bv,0.375rem)*6)] px-[var(--sp-small,0.375rem)]'}`}
-    >
-      <div className="relative flex-none" style={iconStyle}>
-        <CalendarIcon
-          className={`pointer-events-none absolute inset-y-0 left-[var(--sp-small,0.375rem)] m-auto fill-(--icon-color) ${isSmall ? 'size-[var(--icon-small,0.9375rem)]' : 'size-[var(--icon-medium,1.125rem)]'}`}
-        />
-        <input
-          type={type}
-          name={name}
-          value={dateValue}
-          max={maxDate}
-          min={minDate}
-          required={isRequired}
-          disabled={isDisabled}
-          onChange={(event) => handleDateValueChange(event.target.value)}
-          className={`w-[calc(var(--icon-medium,1.125rem)+var(--sp-small,0.375rem)*2)]! cursor-pointer px-[var(--sp-small,0.375rem)]! opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:left-0 [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 ${isSmall ? 'py-[var(--sp-min,0.1875rem)]!' : 'py-[var(--sp-medium,0.75rem)]!'}`}
-        />
-      </div>
-      <input
-        value={dateObject.year}
-        placeholder="年"
-        maxLength={4}
-        type="text"
-        disabled={isDisabled}
-        onChange={(event) => handleObjectChange('year', event.target.value)}
-        className={`w-[calc(var(--sp-medium,0.75rem)*2+5ch)]! ${textInputClass}`}
-      />
-      /
-      <input
-        value={dateObject.month}
-        placeholder="月"
-        maxLength={2}
-        type="text"
-        disabled={isDisabled}
-        onChange={(event) => handleObjectChange('month', event.target.value)}
-        className={`w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${textInputClass}`}
-      />
-      {type === 'date' && <span>/</span>}
-      {type === 'date' && (
-        <input
-          value={dateObject.day}
-          placeholder="日"
-          maxLength={2}
-          type="text"
-          disabled={isDisabled}
-          onChange={(event) => handleObjectChange('day', event.target.value)}
-          className={`w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${textInputClass}`}
-        />
-      )}
-      <ErrorMessage errorMessages={errorMessage ? [errorMessage] : undefined} />
-    </InputBox>
-  )
-}

package/src/components/DateRangePicker.tsx

@@ -1,59 +0,0 @@
-'use client'
-
-import type { CSSProperties } from 'react'
-import { useState } from 'react'
-import { DatePicker } from './DatePicker'
-import { COLOR } from '../constants'
-
-type DateRange = {
-  startDate: string
-  endDate: string
-}
-
-type Props = {
-  isDisabled?: boolean
-  onChange?: (newValue: DateRange) => void
-}
-
-export function DateRangePicker({ isDisabled, onChange }: Props) {
-  const [startDate, setStartDate] = useState('')
-  const [endDate, setEndDate] = useState('')
-
-  const handleStartChange = (newValue: string) => {
-    setStartDate(newValue)
-    onChange?.({ startDate: newValue, endDate })
-  }
-
-  const handleEndChange = (newValue: string) => {
-    setEndDate(newValue)
-    onChange?.({ startDate, endDate: newValue })
-  }
-
-  const style = {
-    '--range-background-color': COLOR.white,
-    '--range-border-color': COLOR.gray,
-  } as CSSProperties
-
-  return (
-    <div
-      style={style}
-      className="flex bg-(--range-background-color) [&>*]:flex-auto [&>*]:rounded-none! [&>*:first-child]:rounded-s-[calc(var(--bv,0.375rem)/2)]! [&>*:last-child]:rounded-e-[calc(var(--bv,0.375rem)/2)]! [&>*:not(:last-child)]:border-e [&>*:not(:last-child)]:border-(--range-border-color)"
-    >
-      <DatePicker
-        value={startDate}
-        name="startDate"
-        isDisabled={isDisabled}
-        onChange={handleStartChange}
-      />
-      <div className="flex flex-none! items-center px-[var(--bv,0.375rem)]">
-        〜
-      </div>
-      <DatePicker
-        value={endDate}
-        name="endDate"
-        isDisabled={isDisabled}
-        onChange={handleEndChange}
-      />
-    </div>
-  )
-}