feat: timeInputV2

.changeset/funny-gifts-shave.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+New component `<TimeInputV2 />`

packages/ui/src/components/TimeInputV2/__stories__/Controlled.stories.tsx

@@ -0,0 +1,54 @@
+import type { StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { type Time, TimeInputV2 } from '..'
+import { Button } from '../../Button'
+import { Stack } from '../../Stack'
+
+export const Controlled: StoryFn<typeof TimeInputV2> = args => {
+  const [value24, setValue24] = useState<Time>()
+  const [value12, setValue12] = useState<Time>()
+
+  return (
+    <Stack gap={5}>
+      <Stack gap={1}>
+        <TimeInputV2
+          {...args}
+          onChange={newValue => {
+            setValue24(newValue)
+          }}
+          value={value24}
+          labelDescription="24 format"
+        />
+        Time: {value24?.h}h {value24?.m}m {value24?.s}s
+        <Button onClick={() => setValue24({ h: '12', m: '34', s: '56' })}>
+          set time to 12:34:56
+        </Button>
+      </Stack>
+      <Stack gap={1}>
+        <TimeInputV2
+          {...args}
+          onChange={newValue => {
+            setValue12(newValue)
+          }}
+          value={value12}
+          timeFormat={12}
+          labelDescription="12 format"
+        />
+        Time: {value12?.h}h {value12?.m}m {value12?.s}s {value12?.period}
+      </Stack>
+    </Stack>
+  )
+}
+
+Controlled.args = {
+  label: 'Label',
+}
+
+Controlled.parameters = {
+  docs: {
+    description: {
+      story:
+        'Most of the time, you need a [controlled component](https://reactjs.org/docs/forms.html).',
+    },
+  },
+}

packages/ui/src/components/TimeInputV2/__stories__/Disabled.stories.tsx

@@ -0,0 +1,7 @@
+import { Template } from './Template.stories'
+
+export const Disabled = Template.bind({})
+
+Disabled.args = {
+  disabled: true,
+}

packages/ui/src/components/TimeInputV2/__stories__/Error.stories.tsx

@@ -0,0 +1,13 @@
+import { Template } from './Template.stories'
+
+export const Error = Template.bind({})
+
+Error.args = {
+  error: 'An error',
+}
+
+Error.parameters = {
+  docs: {
+    description: { story: 'Fill `TimeInput` error using `error` property.' },
+  },
+}

packages/ui/src/components/TimeInputV2/__stories__/Placeholder.stories.tsx

@@ -0,0 +1,18 @@
+import { Template } from './Template.stories'
+
+export const Placeholder = Template.bind({})
+
+Placeholder.args = {
+  placeholder: { m: '--', s: '--', h: '--', period: '-M' },
+  label: 'Custom placeholder',
+  timeFormat: 12,
+}
+
+Placeholder.parameters = {
+  docs: {
+    description: {
+      story:
+        'It is possible to set a custom placeholder for every input with prop `placeholder`, which is of type `Time`',
+    },
+  },
+}

packages/ui/src/components/TimeInputV2/__stories__/Playground.stories.tsx

@@ -0,0 +1,8 @@
+import { Template } from './Template.stories'
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+  label: 'Label',
+  helper: 'Helper',
+}

packages/ui/src/components/TimeInputV2/__stories__/ReadOnly.stories.tsx

@@ -0,0 +1,7 @@
+import { Template } from './Template.stories'
+
+export const ReadOnly = Template.bind({})
+
+ReadOnly.args = {
+  readOnly: true,
+}

packages/ui/src/components/TimeInputV2/__stories__/Required.stories.tsx

@@ -0,0 +1,14 @@
+import { Template } from './Template.stories'
+
+export const Required = Template.bind({})
+
+Required.args = {
+  required: true,
+  label: 'Label',
+}
+
+Required.parameters = {
+  docs: {
+    description: { story: 'Add a required mark using `required` property.' },
+  },
+}

packages/ui/src/components/TimeInputV2/__stories__/Size.stories.tsx

@@ -0,0 +1,11 @@
+import type { StoryFn } from '@storybook/react'
+import { TimeInputV2 } from '..'
+import { Stack } from '../../Stack'
+
+export const Size: StoryFn<typeof TimeInputV2> = args => (
+  <Stack gap="2">
+    <TimeInputV2 {...args} label="small" size="small" />
+    <TimeInputV2 {...args} label="medium" size="medium" />
+    <TimeInputV2 {...args} label="large" size="large" />
+  </Stack>
+)

packages/ui/src/components/TimeInputV2/__stories__/Template.stories.tsx

@@ -0,0 +1,6 @@
+import type { StoryFn } from '@storybook/react'
+import { TimeInputV2 } from '..'
+
+export const Template: StoryFn<typeof TimeInputV2> = args => (
+  <TimeInputV2 {...args} />
+)

packages/ui/src/components/TimeInputV2/__stories__/TimeFormat.stories.tsx

@@ -0,0 +1,35 @@
+import type { StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { TimeInputV2 } from '..'
+import { Stack } from '../../Stack'
+
+type ValueType = {
+  h: string
+  m: string
+  s: string
+  period?: string
+}
+
+export const TimeFormat: StoryFn<typeof TimeInputV2> = args => {
+  const [value1, setValue1] = useState<ValueType>({ h: '13', m: '34', s: '00' })
+  const [value2, setValue2] = useState<ValueType>({ h: '13', m: '34', s: '00' })
+
+  return (
+    <Stack gap="2">
+      <TimeInputV2
+        {...args}
+        label="12-hour format"
+        timeFormat={12}
+        value={value1}
+        onChange={setValue1}
+      />
+      <TimeInputV2
+        {...args}
+        label="24-hour format"
+        timeFormat={24}
+        value={value2}
+        onChange={setValue2}
+      />
+    </Stack>
+  )
+}

packages/ui/src/components/TimeInputV2/__stories__/index.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta } from '@storybook/react'
+import { TimeInputV2 } from '..'
+
+export default {
+  component: TimeInputV2,
+  parameters: {
+    experimental: true,
+  },
+  tags: ['experimental'],
+  title: 'Components/Data Entry/TimeInputV2',
+  decorators: [Story => <Story />],
+} as Meta<typeof TimeInputV2>
+
+export { Playground } from './Playground.stories'
+export { Size } from './Size.stories'
+export { Disabled } from './Disabled.stories'
+export { ReadOnly } from './ReadOnly.stories'
+export { Placeholder } from './Placeholder.stories'
+export { Error } from './Error.stories'
+export { Required } from './Required.stories'
+export { TimeFormat } from './TimeFormat.stories'
+export { Controlled } from './Controlled.stories'