core.ignorecase: true -> false

Author: Midra429

src/components/Layout.tsx

@@ -0,0 +1,43 @@
+import type { Writable } from 'utility-types'
+
+import { useEffect } from 'react'
+import { NextUIProvider, twMergeConfig, cn } from '@nextui-org/react'
+
+import { useTheme } from '@/hooks/useTheme'
+
+import '@/assets/style.css'
+
+const classGroups = twMergeConfig.classGroups as Record<
+  string,
+  Writable<NonNullable<(typeof twMergeConfig)['classGroups']>[string]>
+>
+
+classGroups!['font-size'].push({ text: ['mini'] })
+
+export type LayoutProps = {
+  children: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
+}
+
+export const Layout: React.FC<LayoutProps> = (props) => {
+  const theme = useTheme()
+
+  useEffect(() => {
+    document.body.className = cn(
+      theme || 'hidden',
+      'bg-background text-foreground'
+    )
+  }, [theme])
+
+  return (
+    <NextUIProvider locale="ja-JP">
+      <main
+        className={cn('overflow-y-auto overflow-x-hidden', props.className)}
+        style={props.style}
+      >
+        {props.children}
+      </main>
+    </NextUIProvider>
+  )
+}

src/components/Modal.tsx

@@ -0,0 +1,116 @@
+import type { ModalProps as NextUIModalProps } from '@nextui-org/react'
+
+import { useCallback } from 'react'
+import {
+  Button,
+  Modal as NextUIModal,
+  ModalContent as NextUIModalContent,
+  ModalHeader as NextUIModalHeader,
+  ModalBody as NextUIModalBody,
+  ModalFooter as NextUIModalFooter,
+} from '@nextui-org/react'
+import { XIcon } from 'lucide-react'
+
+export type ModalProps = {
+  fullWidth?: boolean
+
+  isOpen: NextUIModalProps['isOpen']
+  onOpenChange: NextUIModalProps['onOpenChange']
+  onClose?: NextUIModalProps['onClose']
+
+  okText?: string
+  okIcon?: React.ReactNode
+  isOkDisabled?: boolean
+  onOk?: () => void
+
+  cancelText?: string
+  cancelIcon?: React.ReactNode
+
+  header?: React.ReactNode
+  headerEndContent?: React.ReactNode
+
+  footer?: React.ReactNode
+
+  children: React.ReactNode
+}
+
+export const Modal: React.FC<ModalProps> = (props) => {
+  return (
+    <NextUIModal
+      classNames={{
+        wrapper: 'justify-end',
+        base: !props.fullWidth && 'max-w-[370px]',
+        header: 'border-b-1 border-foreground-200 p-2 text-medium',
+        body: 'p-0',
+        footer: 'border-t-1 border-foreground-200 p-2',
+      }}
+      size="full"
+      hideCloseButton
+      isKeyboardDismissDisabled={true}
+      isOpen={props.isOpen}
+      onOpenChange={props.onOpenChange}
+      onClose={props.onClose}
+    >
+      <NextUIModalContent>
+        {(onClose) => {
+          const onPressOk = useCallback(() => {
+            props.onOk?.()
+            onClose()
+          }, [props.onOk])
+
+          return (
+            <>
+              {props.header && (
+                <NextUIModalHeader className="flex flex-row justify-between">
+                  <div className="flex min-h-8 flex-row items-center">
+                    {props.header}
+                  </div>
+
+                  <div className="shrink-0 font-normal">
+                    {props.headerEndContent}
+                  </div>
+                </NextUIModalHeader>
+              )}
+
+              <NextUIModalBody className="max-h-full gap-0 overflow-auto bg-background">
+                {props.children}
+              </NextUIModalBody>
+
+              {props.footer !== false && (
+                <NextUIModalFooter>
+                  {props.footer ?? (
+                    <>
+                      <Button
+                        size="sm"
+                        variant="flat"
+                        color="default"
+                        startContent={
+                          props.cancelIcon || <XIcon className="size-4" />
+                        }
+                        onPress={onClose}
+                      >
+                        {props.cancelText || 'キャンセル'}
+                      </Button>
+
+                      {props.onOk && (
+                        <Button
+                          size="sm"
+                          color="primary"
+                          isDisabled={props.isOkDisabled}
+                          startContent={props.okIcon}
+                          onPress={onPressOk}
+                        >
+                          {props.okText || 'OK'}
+                        </Button>
+                      )}
+                    </>
+                  )}
+                </NextUIModalFooter>
+              )}
+            </>
+          )
+        }}
+      </NextUIModalContent>
+    </NextUIModal>
+  )
+}

src/components/Popconfirm.tsx

@@ -0,0 +1,143 @@
+import type { PopoverProps, ButtonProps } from '@nextui-org/react'
+
+import { useState, useCallback } from 'react'
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Button,
+  cn,
+  tv,
+} from '@nextui-org/react'
+import { InfoIcon } from 'lucide-react'
+
+export type PopconfirmProps = {
+  children: React.ReactElement
+
+  placement?: PopoverProps['placement']
+  icon?: React.ReactNode
+  title: React.ReactNode
+  description: React.ReactNode
+
+  okColor?: ButtonProps['color']
+  okText?: React.ReactNode
+  onOk: () => void | Promise<void>
+
+  cancelColor?: ButtonProps['color']
+  cancelText?: React.ReactNode
+  onCancel?: () => void | Promise<void>
+}
+
+const popoverIcon = tv({
+  defaultVariants: {
+    color: 'default',
+  },
+  variants: {
+    color: {
+      default: 'fill-blue-600/10 text-blue-600',
+      primary: 'fill-primary/10 text-primary',
+      secondary: 'fill-secondary/10 text-secondary',
+      success: 'fill-success/10 text-success',
+      warning: 'fill-warning/10 text-warning',
+      danger: 'fill-danger/10 text-danger',
+    },
+  },
+})
+
+export const Popconfirm: React.FC<PopconfirmProps> = (props) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isOkLoading, setIsOkLoading] = useState(false)
+  const [isCancelLoading, setIsCancelLoading] = useState(false)
+
+  const onPressCancel = useCallback(async () => {
+    if (props.onCancel) {
+      const response = props.onCancel()
+
+      if (response instanceof Promise) {
+        setIsCancelLoading(true)
+        await response
+        setIsCancelLoading(false)
+      }
+    }
+
+    setIsOpen(false)
+  }, [props.onCancel])
+
+  const onPressOk = useCallback(async () => {
+    const response = props.onOk()
+
+    if (response instanceof Promise) {
+      setIsOkLoading(true)
+      await response
+      setIsOkLoading(false)
+    }
+
+    setIsOpen(false)
+  }, [props.onOk])
+
+  return (
+    <Popover
+      classNames={{
+        content: [
+          'flex flex-row items-start gap-1.5 p-2.5',
+          'border-1 border-foreground-100',
+        ],
+      }}
+      placement={props.placement}
+      backdrop="opaque"
+      showArrow
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+    >
+      <PopoverTrigger>{props.children}</PopoverTrigger>
+
+      <PopoverContent>
+        <div className="flex h-5 shrink-0 items-center">
+          {props.icon || (
+            <InfoIcon
+              className={popoverIcon({ color: props.okColor })}
+              size={16}
+            />
+          )}
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <span className="font-semibold">{props.title}</span>
+
+          <span
+            className={cn(
+              'text-tiny',
+              'text-foreground-500 dark:text-foreground-600'
+            )}
+          >
+            {props.description}
+          </span>
+
+          <div className="ml-auto mt-1.5 flex flex-row gap-2">
+            <Button
+              className="h-7"
+              size="sm"
+              color={props.cancelColor || 'default'}
+              variant="flat"
+              isLoading={isCancelLoading}
+              onPress={onPressCancel}
+            >
+              {props.cancelText || 'キャンセル'}
+            </Button>
+
+            <Button
+              className="h-7"
+              size="sm"
+              color={props.okColor || 'primary'}
+              variant="solid"
+              isLoading={isOkLoading}
+              onPress={onPressOk}
+            >
+              {props.okText || 'OK'}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

src/components/Segmented.tsx

@@ -0,0 +1,73 @@
+import type { TabsProps } from '@nextui-org/react'
+
+import { Tabs, Tab, cn, tv } from '@nextui-org/react'
+
+export type SegmentedProps = {
+  className?: TabsProps['className']
+
+  items: SegmentedItem[]
+  size?: TabsProps['size']
+  radius?: TabsProps['radius']
+  fullWidth?: TabsProps['fullWidth']
+  label?: string
+  selectedKey?: string
+  defaultSelectedKey?: string
+  onSelectionChange?: (key: string) => void
+}
+
+export type SegmentedItem = {
+  key: string | number
+  children: React.ReactNode
+  startContent?: React.ReactNode
+}
+
+const segmentedLabel = tv({
+  base: 'my-1',
+  variants: {
+    size: {
+      sm: 'text-small',
+      md: 'text-medium',
+      lg: 'text-large',
+    },
+  },
+})
+
+export const Segmented: React.FC<SegmentedProps> = (props) => {
+  return (
+    <div className={cn('flex flex-col gap-1', props.className)}>
+      {props.label && (
+        <span className={segmentedLabel({ size: props.size })}>
+          {props.label}
+        </span>
+      )}
+
+      <Tabs
+        color="primary"
+        size={props.size}
+        radius={props.radius}
+        fullWidth={props.fullWidth}
+        selectedKey={props.selectedKey}
+        defaultSelectedKey={props.defaultSelectedKey}
+        onSelectionChange={
+          props.onSelectionChange as TabsProps['onSelectionChange']
+        }
+      >
+        {props.items.map(({ key, children, startContent }) => (
+          <Tab
+            key={key}
+            title={
+              startContent ? (
+                <div className="flex flex-row items-center gap-1">
+                  {startContent}
+                  <span>{children}</span>
+                </div>
+              ) : (
+                children
+              )
+            }
+          />
+        ))}
+      </Tabs>
+    </div>
+  )
+}