Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: WarekiPicker を追加 #5196

Merged
merged 3 commits into from
Dec 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ const datePicker = tv({
},
})

/** @deprecated DatePicker は非推奨です。Input[type=date] を使ってください。 */
export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
(
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {},
Expand All @@ -20,6 +20,7 @@ export default {
parameters: {
chromatic: { disableSnapshot: true },
},
tags: ['skip-test-runner'],
} satisfies Meta<typeof DatePicker>

export const Playground: StoryObj<typeof DatePicker> = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -55,7 +55,7 @@ export default {
parameters: {
chromatic: { disableSnapshot: false },
},
tags: ['!autodocs'],
tags: ['!autodocs', 'skip-test-runner'],
} satisfies Meta<typeof DatePicker>

export const VRT = {}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
),
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
1 change: 1 addition & 0 deletions packages/smarthr-ui/src/components/Picker/TimePicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
Original file line number Diff line number Diff line change
@@ -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} />
)
1 change: 1 addition & 0 deletions packages/smarthr-ui/src/components/WarekiPicker/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { WarekiPicker } from './WarekiPicker'
Original file line number Diff line number Diff line change
@@ -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>
),
}
Original file line number Diff line number Diff line change
@@ -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日'),
},
}
1 change: 1 addition & 0 deletions packages/smarthr-ui/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
5 changes: 0 additions & 5 deletions packages/smarthr-ui/test-runner-jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading