feat(SliderField): new slider into forms (#3997)

* feat(SliderField): new slider into forms

* ci: improve coverage of slider field

* ci: improve double slider coverage

* fix: feedback alex

* fix: feedback dodo

.changeset/khaki-fishes-hear.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<Slider />` component to avoid loop rendering while using `useEffect` so synchronise states

.changeset/poor-turkeys-deny.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/form": minor
+---
+
+Add new component `<SliderField />`

packages/form/src/components/SliderField/__stories__/Double.stories.tsx

@@ -0,0 +1,12 @@
+import { Template } from './Template.stories'
+
+export const Double = Template.bind({})
+
+Double.args = {
+  double: true,
+  input: true,
+  min: 0,
+  max: 10,
+  label: 'Label',
+  name: 'name',
+}

packages/form/src/components/SliderField/__stories__/Playground.stories.tsx

@@ -0,0 +1,11 @@
+import { Template } from './Template.stories'
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+  input: true,
+  min: 0,
+  max: 10,
+  label: 'Label',
+  name: 'name',
+}

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

@@ -0,0 +1,18 @@
+import type { StoryFn } from '@storybook/react'
+import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
+import { SliderField } from '..'
+import { Submit } from '../../Submit'
+
+export const Required: StoryFn<ComponentProps<typeof SliderField>> = args => (
+  <Stack gap={1}>
+    <SliderField {...args} />
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+Required.args = {
+  name: 'required-slider',
+  required: true,
+  label: 'This slider is required',
+}

packages/form/src/components/SliderField/__stories__/Template.stories.tsx

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

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

@@ -0,0 +1,85 @@
+import type { Meta } from '@storybook/react'
+import { Snippet, Stack, Text } from '@ultraviolet/ui'
+import { Form, SliderField } from '../..'
+import { useForm } from '../../..'
+import { mockErrors } from '../../../mocks'
+
+export default {
+  component: SliderField,
+  decorators: [
+    ChildStory => {
+      const methods = useForm()
+      const {
+        errors,
+        isDirty,
+        isSubmitting,
+        touchedFields,
+        submitCount,
+        dirtyFields,
+        isValid,
+        isLoading,
+        isSubmitted,
+        isValidating,
+        isSubmitSuccessful,
+      } = methods.formState
+
+      return (
+        <Form onSubmit={() => {}} errors={mockErrors} methods={methods}>
+          <Stack gap={2}>
+            <div
+              style={{
+                width: '250px',
+              }}
+            >
+              <ChildStory />
+            </div>
+            <Stack gap={1}>
+              <Text variant="bodyStrong" as="p">
+                Form input values:
+              </Text>
+              <Snippet prefix="lines" initiallyExpanded>
+                {JSON.stringify(methods.watch(), null, 1)}
+              </Snippet>
+            </Stack>
+            <Stack gap={1}>
+              <Text variant="bodyStrong" as="p">
+                Form values:
+              </Text>
+              <Snippet prefix="lines">
+                {JSON.stringify(
+                  {
+                    errors,
+                    isDirty,
+                    isSubmitting,
+                    touchedFields,
+                    submitCount,
+                    dirtyFields,
+                    isValid,
+                    isLoading,
+                    isSubmitted,
+                    isValidating,
+                    isSubmitSuccessful,
+                  },
+                  null,
+                  1,
+                )}
+              </Snippet>
+            </Stack>
+          </Stack>
+        </Form>
+      )
+    },
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A Slider field',
+      },
+    },
+  },
+  title: 'Form/Components/Fields/SliderField',
+} as Meta
+
+export { Playground } from './Playground.stories'
+export { Double } from './Double.stories'
+export { Required } from './Required.stories'