fix(DatePicker): deprecated し WarekiPicker を追加

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: {},

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'

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 { DatePicker } from './WarekiPicker'

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

@@ -0,0 +1,111 @@
+/* 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 showAlternative = (_: Date | null) => <div>alt</div>
+    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}
+              showAlternative={showAlternative}
+            />
+            <WarekiPicker
+              error={m.error}
+              disabled={m.disabled}
+              value={value}
+              formatDate={formatDate}
+            />
+          </>
+        ))}
+      </Cluster>
+    )
+  },
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
+  tags: ['!autodocs'],
+} 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,99 @@
+/* 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 },
+  },
+} 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日'),
+  },
+}