feat: WarekiPicker を追加 (#5196)

packages/smarthr-ui/src/components/DatePicker/DatePicker.tsx

@@ -76,6 +76,7 @@ const datePicker = tv({
   },
 })
 
+/** @deprecated DatePicker は非推奨です。Input[type=date] を使ってください。 */
 export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
   (
     {

packages/smarthr-ui/src/components/DatePicker/stories/DatePicker.stories.tsx

@@ -8,7 +8,7 @@ import { DatePicker } from '../DatePicker'
 import type { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'Forms（フォーム）/DatePicker',
+  title: 'Forms（フォーム）/DatePicker（非推奨）',
   component: DatePicker,
   render: (args) => <DatePicker {...args} />,
   args: {},
@@ -20,6 +20,7 @@ export default {
   parameters: {
     chromatic: { disableSnapshot: true },
   },
+  tags: ['skip-test-runner'],
 } satisfies Meta<typeof DatePicker>
 
 export const Playground: StoryObj<typeof DatePicker> = {

packages/smarthr-ui/src/components/DatePicker/stories/VRTDatePicker.stories.tsx

@@ -11,7 +11,7 @@ import { DatePicker } from '../DatePicker'
 import type { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'Forms（フォーム）/DatePicker/VRT',
+  title: 'Forms（フォーム）/DatePicker（非推奨）/VRT',
   component: DatePicker,
   render: (args) => {
     const value = '2024/11/06'
@@ -55,7 +55,7 @@ export default {
   parameters: {
     chromatic: { disableSnapshot: false },
   },
-  tags: ['!autodocs'],
+  tags: ['!autodocs', 'skip-test-runner'],
 } satisfies Meta<typeof DatePicker>
 
 export const VRT = {}

packages/smarthr-ui/src/components/Input/stories/Input.stories.tsx

@@ -49,10 +49,15 @@ export const Type: StoryObj<typeof Input> = {
   name: 'type',
   render: (args) => (
     <Stack>
-      {[undefined, 'text', 'number', 'password'].map((type) => (
-        // eslint-disable-next-line smarthr/a11y-input-in-form-control
-        <Input {...args} type={type} key={type} />
-      ))}
+      {[undefined, 'text', 'number', 'password', 'date', 'datetime-local', 'time', 'month'].map(
+        (type) => (
+          <label key={type}>
+            {`${type ?? '未指定'}： `}
+            {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}
+            <Input {...args} type={type} key={type} />
+          </label>
+        ),
+      )}
     </Stack>
   ),
 }

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

@@ -8,6 +8,7 @@ type Props = {
   error?: boolean
 }
 
+/** @deprecated DatetimeLocalPicker は非推奨です。Input[type="datetime-local"] を使ってください。 */
 export const DatetimeLocalPicker = forwardRef<HTMLInputElement, PickerProps<Props>>(
   ({ disabled, error, readOnly, className, ...rest }, ref) => {
     const { wrapperStyle, innerStyle } = useMemo(() => {

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

@@ -8,6 +8,7 @@ type Props = {
   error?: boolean
 }
 
+/** @deprecated MonthPicker は非推奨です。Input[type="month"] を使ってください。 */
 export const MonthPicker = forwardRef<HTMLInputElement, PickerProps<Props>>(
   ({ disabled, error, readOnly, className, ...rest }, ref) => {
     const { wrapperStyle, innerStyle } = useMemo(() => {

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

@@ -8,6 +8,7 @@ type Props = {
   error?: boolean
 }
 
+/** @deprecated TimePicker は非推奨です。Input[type="time"] を使ってください。 */
 export const TimePicker = forwardRef<HTMLInputElement, PickerProps<Props>>(
   ({ disabled, error, readOnly, className, ...rest }, ref) => {
     const { wrapperStyle, innerStyle } = useMemo(() => {

packages/smarthr-ui/src/components/WarekiPicker/WarekiPicker.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentProps } from 'react'
+
+import { DatePicker } from '../DatePicker'
+
+type Props = Omit<ComponentProps<typeof DatePicker>, 'showAlternative'>
+
+const handleShowWareki = (date: Date | null) =>
+  date?.toLocaleDateString('ja-JP-u-ca-japanese', {
+    dateStyle: 'long',
+  })
+
+export const WarekiPicker: React.FC<Props> = (props) => (
+  // eslint-disable-next-line smarthr/a11y-input-in-form-control
+  <DatePicker {...props} showAlternative={handleShowWareki} />
+)

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

@@ -0,0 +1 @@
+export { WarekiPicker } from './WarekiPicker'

packages/smarthr-ui/src/components/WarekiPicker/stories/VRTWarekiPicker.stories.tsx

@@ -0,0 +1,104 @@
+/* eslint-disable smarthr/a11y-input-has-name-attribute */
+/* eslint-disable smarthr/a11y-prohibit-input-placeholder */
+/* eslint-disable smarthr/a11y-input-in-form-control */
+import { userEvent, within } from '@storybook/test'
+import dayjs from 'dayjs'
+import React from 'react'
+
+import { Cluster } from '../../Layout'
+import { WarekiPicker } from '../WarekiPicker'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+export default {
+  title: 'Forms（フォーム）/WarekiPicker/VRT',
+  component: WarekiPicker,
+  render: (args) => {
+    const value = '2024/11/06'
+    const placeholder = '日付を入力してください'
+    const width = '100%'
+    const formatDate = (date: Date | null) => dayjs(date).format('YYYY年MM月DD')
+
+    const matrics = [
+      { error: false, disabled: false },
+      { error: false, disabled: true },
+      { error: true, disabled: false },
+      { error: true, disabled: true },
+    ]
+
+    return (
+      <Cluster>
+        {matrics.map((m) => (
+          <>
+            <WarekiPicker {...args} error={m.error} disabled={m.disabled} />
+            <WarekiPicker error={m.error} disabled={m.disabled} placeholder={placeholder} />
+            <WarekiPicker error={m.error} disabled={m.disabled} value={value} />
+            <WarekiPicker error={m.error} disabled={m.disabled} width={width} />
+            <WarekiPicker
+              error={m.error}
+              disabled={m.disabled}
+              value={value}
+              formatDate={formatDate}
+            />
+          </>
+        ))}
+      </Cluster>
+    )
+  },
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
+  tags: ['!autodocs', 'skip-test-runner'],
+} satisfies Meta<typeof WarekiPicker>
+
+export const VRT = {}
+
+export const VRTForcedColors: StoryObj = {
+  ...VRT,
+  parameters: {
+    chromatic: { forcedColors: 'active' },
+  },
+}
+
+export const VRTExpanded: StoryObj = {
+  render: (args) => <WarekiPicker {...args} className="shr-min-w-[500px] shr-h-[500px]" />,
+  args: {
+    value: '2024/11/06',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole('textbox'))
+  },
+}
+
+export const VRTExpandedForcedColor: StoryObj = {
+  ...VRTExpanded,
+  parameters: {
+    chromatic: { forcedColors: 'active' },
+  },
+}
+
+export const VRTExpandedFromTo: StoryObj = {
+  ...VRTExpanded,
+  args: {
+    value: '2024/11/06',
+    from: dayjs('2024/11/03').toDate(),
+    to: dayjs('2024/11/09').toDate(),
+  },
+}
+
+export const VRTExpandedFromToForcedColor: StoryObj = {
+  ...VRTExpandedFromTo,
+  parameters: {
+    chromatic: { forcedColors: 'active' },
+  },
+}
+
+export const VRTExpandedBottom: StoryObj = {
+  ...VRTExpanded,
+  render: (args) => (
+    <div className="shr-w-full shr-h-[100vh] shr-relative">
+      <WarekiPicker {...args} className="shr-absolute shr-bottom-0" />
+    </div>
+  ),
+}

packages/smarthr-ui/src/components/WarekiPicker/stories/WarekiPicker.stories.tsx

@@ -0,0 +1,100 @@
+/* eslint-disable smarthr/a11y-input-in-form-control */
+import { userEvent, within } from '@storybook/test'
+import dayjs from 'dayjs'
+import React from 'react'
+
+import { WarekiPicker } from '../WarekiPicker'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+export default {
+  title: 'Forms（フォーム）/WarekiPicker',
+  component: WarekiPicker,
+  render: (args) => <WarekiPicker {...args} />,
+  args: {},
+  argTypes: {
+    value: {
+      control: 'text',
+    },
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+  tags: ['skip-test-runner'],
+} satisfies Meta<typeof WarekiPicker>
+
+export const Playground: StoryObj<typeof WarekiPicker> = {
+  args: {},
+}
+
+export const Value: StoryObj<typeof WarekiPicker> = {
+  name: 'value',
+  args: {
+    value: '2024-11-06',
+  },
+}
+
+export const Disabled: StoryObj<typeof WarekiPicker> = {
+  name: 'disabled',
+  args: {
+    disabled: true,
+  },
+}
+
+export const PlaceHolder: StoryObj<typeof WarekiPicker> = {
+  name: 'placeholder',
+  args: {
+    placeholder: '日付を選択してください',
+  },
+}
+
+export const Error: StoryObj<typeof WarekiPicker> = {
+  name: 'error',
+  args: {
+    error: true,
+  },
+}
+
+export const Width: StoryObj<typeof WarekiPicker> = {
+  name: 'width',
+  args: {
+    width: '500px',
+  },
+}
+
+export const From: StoryObj<typeof WarekiPicker> = {
+  name: 'from',
+  args: {
+    from: dayjs().subtract(3, 'day').toDate(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole('textbox'))
+  },
+}
+
+export const To: StoryObj<typeof WarekiPicker> = {
+  name: 'to',
+  args: {
+    to: dayjs().add(3, 'day').toDate(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    await userEvent.click(canvas.getByRole('textbox'))
+  },
+}
+
+export const ParseInput: StoryObj<typeof WarekiPicker> = {
+  name: 'parseInput',
+  args: {
+    value: '2024年11月06日',
+    parseInput: (input) => dayjs(input.replace(/年|月/g, '-').replace(/日/g, '')).toDate(),
+  },
+}
+
+export const FormatDate: StoryObj<typeof WarekiPicker> = {
+  name: 'formatDate',
+  args: {
+    formatDate: (date) => dayjs(date).format('YYYY年MM月DD日'),
+  },
+}

packages/smarthr-ui/src/index.ts

@@ -91,6 +91,7 @@ export * from './components/Switch'
 export * from './components/Stepper'
 export * from './components/Picker'
 export * from './components/Browser'
+export * from './components/WarekiPicker'
 
 // layout components
 export { Center, Cluster, Reel, Stack, Sidebar } from './components/Layout'

packages/smarthr-ui/test-runner-jest.config.js

@@ -32,11 +32,6 @@ module.exports = {
     'ComboBox.stories.tsx',
     'FieldSet.stories.tsx',
     'Switch.stories.tsx',
-    /**
-     * error: "Form elements must have labels"
-     * error: "Elements must only use allowed ARIA attributes"
-     */
-    'DatePicker.stories.tsx',
     'FormControl.stories.tsx', // DatePicker を含むために除外
     /**
      * error: "ARIA attributes must conform to valid values"