feat(KeyValueInput): new component

.changeset/dry-news-add.md

@@ -0,0 +1,6 @@
+---
+"@ultraviolet/form": patch
+"@ultraviolet/ui": patch
+---
+
+New component `KeyValueInput` and use it inside `KeyValueField`. Made a couple of addition to each component: new prop `size` and it is now possible to have a SelectInput instead of a TextInput (use `inputType: "select"` in inputValue and inputKey)

packages/form/src/components/KeyValueField/__stories__/Required.stories.tsx

@@ -0,0 +1,27 @@
+import type { StoryFn } from '@storybook/react-vite'
+import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
+import { KeyValueField } from '..'
+import { Submit } from '../../Submit'
+
+export const Required: StoryFn<ComponentProps<typeof KeyValueField>> = args => (
+  <Stack gap={1}>
+    <KeyValueField {...args} />
+    <Submit>Submit</Submit>
+  </Stack>
+)
+Required.args = {
+  addButton: {
+    maxSizeReachedTooltip: 'This is a tooltip when the max size is reached',
+    name: 'Add key-value',
+    tooltip: 'This is a tooltip',
+  },
+  inputKey: {
+    label: 'key',
+  },
+  inputValue: {
+    label: 'value',
+  },
+  name: 'keyvalue',
+  required: true,
+}

packages/form/src/components/KeyValueField/__stories__/WithSelect.stories.tsx

@@ -0,0 +1,36 @@
+import { Template } from './Template.stories'
+
+const keyOptions = [
+  { value: 'key-1', label: 'First key' },
+  { value: 'key-2', label: 'Second key' },
+  { value: 'key-3', label: 'Third key' },
+  { value: 'disabled', label: 'Disabled key', disabled: true },
+]
+const valueOption = [
+  { value: 'value-1', label: 'First value' },
+  { value: 'value-2', label: 'Second value' },
+  { value: 'value-3', label: 'Third value' },
+  { value: 'disabled', label: 'Disabled value', disabled: true },
+]
+export const WithSelect = Template.bind({})
+
+WithSelect.args = {
+  addButton: {
+    maxSizeReachedTooltip: 'This is a tooltip when the max size is reached',
+    name: 'Add key-value',
+    tooltip: 'This is a tooltip',
+  },
+  inputKey: {
+    label: 'Key',
+    required: true,
+    inputType: 'select',
+    options: keyOptions,
+  },
+  inputValue: {
+    label: 'Value',
+    required: false,
+    inputType: 'select',
+    options: valueOption,
+  },
+  name: 'keyValues',
+}

packages/form/src/components/KeyValueField/__stories__/index.stories.tsx

@@ -73,3 +73,5 @@ export default {
 export { Playground } from './Playground.stories'
 export { Environnement } from './Environnement.stories'
 export { Regex } from './Regex.stories'
+export { Required } from './Required.stories'
+export { WithSelect } from './WithSelect.stories'