feat: 月選択UI (MonthPicker) を追加したい (#5030)

packages/smarthr-ui/src/components/Picker/MonthPicker.stories.tsx

@@ -0,0 +1,56 @@
+import { StoryFn } from '@storybook/react/*'
+import React from 'react'
+
+import { FormControl } from '../FormControl'
+
+import { MonthPicker } from './MonthPicker'
+
+export default {
+  title: 'Forms（フォーム）/MonthPicker',
+  component: MonthPicker,
+}
+
+const _Template: StoryFn = (args) => (
+  <ul className="shr-list-none shr-space-y-1">
+    <li>
+      <FormControl title="月">
+        <MonthPicker {...args} name="month" />
+      </FormControl>
+    </li>
+    <li>
+      <FormControl title="非活性">
+        <MonthPicker {...args} disabled={true} name="disabled" />
+      </FormControl>
+    </li>
+    <li>
+      <FormControl title="エラーあり" autoBindErrorInput={false}>
+        <MonthPicker {...args} error={true} name="error" />
+      </FormControl>
+    </li>
+    <li>
+      <FormControl title="エラーあり with FormControl" errorMessages={['エラーメッセージ']}>
+        <MonthPicker {...args} name="error_With_formcontrol" />
+      </FormControl>
+    </li>
+    <li>
+      <FormControl title="読み取り専用">
+        <MonthPicker {...args} readOnly={true} name="read_only" />
+      </FormControl>
+    </li>
+  </ul>
+)
+
+export const Default = _Template.bind({})
+
+export const VRTFocus = _Template.bind({})
+VRTFocus.parameters = {
+  controls: { hideNoControlsWarning: true },
+  pseudo: {
+    focusWithin: ['span:has(> input)'],
+  },
+}
+
+export const VRTForcedColors = _Template.bind({})
+VRTForcedColors.parameters = {
+  chromatic: { forcedColors: 'active' },
+}

packages/smarthr-ui/src/components/Picker/MonthPicker.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef, useMemo } from 'react'
+
+import { pickerStyle } from './style'
+import { PickerProps } from './types'
+
+type Props = {
+  /** フォームにエラーがあるかどうか */
+  error?: boolean
+}
+
+export const MonthPicker = forwardRef<HTMLInputElement, PickerProps<Props>>(
+  ({ disabled, error, readOnly, className, ...rest }, ref) => {
+    const { wrapperStyle, innerStyle } = useMemo(() => {
+      const { wrapper, inner } = pickerStyle('MonthPicker')
+      return {
+        wrapperStyle: wrapper({ className, disabled, readOnly }),
+        innerStyle: inner(),
+      }
+    }, [disabled, readOnly, className])
+
+    return (
+      <span className={wrapperStyle}>
+        {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}
+        <input
+          {...rest}
+          data-smarthr-ui-input="true"
+          ref={ref}
+          type="month"
+          disabled={disabled}
+          readOnly={readOnly}
+          aria-invalid={error || undefined}
+          className={innerStyle}
+        />
+      </span>
+    )
+  },
+)

packages/smarthr-ui/src/components/Picker/TimePicker.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef, useMemo } from 'react'
+
+import { pickerStyle } from './style'
+import { PickerProps } from './types'
+
+type Props = {
+  /** フォームにエラーがあるかどうか */
+  error?: boolean
+}
+
+export const TimePicker = forwardRef<HTMLInputElement, PickerProps<Props>>(
+  ({ disabled, error, readOnly, className, ...rest }, ref) => {
+    const { wrapperStyle, innerStyle } = useMemo(() => {
+      const { wrapper, inner } = pickerStyle('TimePicker')
+      return {
+        wrapperStyle: wrapper({ className, disabled, readOnly }),
+        innerStyle: inner(),
+      }
+    }, [disabled, readOnly, className])
+
+    return (
+      <span className={wrapperStyle}>
+        {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}
+        <input
+          {...rest}
+          data-smarthr-ui-input="true"
+          ref={ref}
+          type="time"
+          disabled={disabled}
+          readOnly={readOnly}
+          aria-invalid={error || undefined}
+          className={innerStyle}
+        />
+      </span>
+    )
+  },
+)

packages/smarthr-ui/src/components/Picker/index.ts

@@ -0,0 +1,2 @@
+export { TimePicker } from './TimePicker'
+export { MonthPicker } from './MonthPicker'

packages/smarthr-ui/src/components/Picker/style.ts

@@ -0,0 +1,33 @@
+import { tv } from 'tailwind-variants'
+
+/**
+ * @param componentName
+ * コンポーネントの名前 (例: 'TimePicker')
+ */
+export const pickerStyle = (componentName: string) =>
+  tv({
+    slots: {
+      wrapper: [
+        `smarthr-ui-${componentName}`,
+        'shr-inline-block shr-border-shorthand shr-rounded-m shr-bg-white shr-px-0.5 shr-leading-none',
+        'contrast-more:shr-border-high-contrast',
+        'focus-within:shr-focus-indicator',
+        'has-[[aria-invalid]]:shr-border-danger',
+      ],
+      inner: [
+        'shr-border-none shr-text-base disabled:shr-text-disabled shr-bg-transparent shr-text-black shr-outline-none shr-outline-0 shr-p-[unset] shr-py-0.75 shr-h-[theme(fontSize.base)] shr-tabular-nums',
+      ],
+    },
+    variants: {
+      disabled: {
+        true: {
+          wrapper: 'shr-pointer-events-none shr-bg-white-darken [&&&]:shr-border-default/50',
+        },
+      },
+      readOnly: {
+        true: {
+          wrapper: '[&&&]:shr-border-[theme(backgroundColor.background)] [&&&]:shr-bg-background',
+        },
+      },
+    },
+  })()

packages/smarthr-ui/src/components/Picker/types.ts

@@ -0,0 +1,3 @@
+import { ComponentPropsWithoutRef } from 'react'
+
+export type PickerProps<Props> = Props & Omit<ComponentPropsWithoutRef<'input'>, keyof Props>

packages/smarthr-ui/src/index.ts

@@ -89,7 +89,7 @@ export * from './components/ResponseMessage'
 export * from './components/Badge'
 export * from './components/Switch'
 export * from './components/Stepper'
-export * from './components/TimePicker'
+export * from './components/Picker'
 
 // layout components
 export { Center, Cluster, Reel, Stack, Sidebar } from './components/Layout'

sandbox/next/e2e/rsc.test.ts

@@ -14,6 +14,7 @@ const SERVER_COMPONENTS = [
   'HeaderLink',
   'Icon',
   'Loader',
+  'MonthPicker',
   'RangeSeparator',
   'ResponseMessage',
   'SmartHRLogo',

sandbox/next/src/app/rsc_test/MonthPicker/page.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { MonthPicker } from 'smarthr-ui'
+export default function MonthPickerPage() {
+  return (
+    <>
+      <div>Success: MonthPicker</div>
+      <MonthPicker name="name" />
+    </>
+  )
+}