Merge branch 'main' into renovate/react-hook-form-7.x

.changeset/empty-islands-itch.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+New components `SelectableCardGroup` 

.changeset/fuzzy-students-suffer.md

@@ -0,0 +1,6 @@
+---
+"@ultraviolet/plus": minor
+---
+
+- New component `<SteppedListContainer>` 
+- New props `prominence` and `onClick` to `<StepList>`

.changeset/great-elephants-attack.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/form": patch
+---
+
+New component ultraviolet/ui and `SelectableCardGroupField`

.changeset/lazy-pears-attend.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/illustrations": patch
+---
+
+New various illustrations

examples/next-advanced/package.json

@@ -18,7 +18,7 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
     "@ultraviolet/ui": "workspace:*",
-    "next": "14.1.2",
+    "next": "14.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-schemaorg": "2.0.0",

examples/next-login/package.json

@@ -20,7 +20,7 @@
     "@ultraviolet/form": "workspace:*",
     "@ultraviolet/icons": "workspace:*",
     "@ultraviolet/ui": "workspace:*",
-    "next": "14.1.2",
+    "next": "14.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-schemaorg": "2.0.0",

examples/next-simple/package.json

@@ -18,7 +18,7 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
     "@ultraviolet/ui": "workspace:*",
-    "next": "14.1.2",
+    "next": "14.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-schemaorg": "2.0.0",

package.json

@@ -113,7 +113,7 @@
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-url": "8.0.2",
-    "@scaleway/eslint-config-react": "3.17.3",
+    "@scaleway/eslint-config-react": "3.17.4",
     "@scaleway/jest-helpers": "3.0.12",
     "@scaleway/tsconfig": "1.1.1",
     "@scaleway/use-i18n": "6.1.2",
@@ -152,7 +152,7 @@
     "babel-loader": "9.1.3",
     "babel-plugin-annotate-pure-calls": "0.4.0",
     "babel-plugin-named-exports-order": "0.0.2",
-    "chromatic": "10.9.6",
+    "chromatic": "11.0.0",
     "cross-env": "7.0.3",
     "cz-conventional-changelog": "3.3.0",
     "date-fns": "3.3.1",

packages/form/src/components/SelectableCardGroupField/__stories__/Checkbox.tsx

@@ -0,0 +1,18 @@
+import type { StoryFn } from '@storybook/react'
+import type { ComponentProps } from 'react'
+import { SelectableCardGroupField } from '../..'
+
+export const Checkbox: StoryFn<
+  ComponentProps<typeof SelectableCardGroupField>
+> = args => (
+  <SelectableCardGroupField {...args} type="checkbox">
+    <SelectableCardGroupField.Card value="radio 1" label="Radio 1" />
+    <SelectableCardGroupField.Card value="radio 2" label="Radio 2" />
+  </SelectableCardGroupField>
+)
+
+Checkbox.args = {
+  name: 'mySelectableCardGroup',
+  legend: 'Checkbox',
+  showTick: true,
+}

packages/form/src/components/SelectableCardGroupField/__stories__/Error.stories.tsx

@@ -0,0 +1,18 @@
+import type { StoryFn } from '@storybook/react'
+import type { ComponentProps } from 'react'
+import { SelectableCardGroupField } from '../..'
+
+export const Error: StoryFn<
+  ComponentProps<typeof SelectableCardGroupField>
+> = args => (
+  <SelectableCardGroupField {...args} error="This is an error">
+    <SelectableCardGroupField.Card value="radio 1" label="Radio 1" />
+    <SelectableCardGroupField.Card value="radio 2" label="Radio 2" />
+  </SelectableCardGroupField>
+)
+
+Error.args = {
+  name: 'mySelectableCardGroup',
+  legend: 'Legend label',
+  columns: 2,
+}

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

@@ -0,0 +1,5 @@
+import { Template } from './Template.stories'
+
+export const Playground = Template.bind({})
+
+Playground.args = { ...Template.args }

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

@@ -0,0 +1,28 @@
+import type { StoryFn } from '@storybook/react'
+import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
+import { SelectableCardGroupField } from '..'
+import { Submit } from '../..'
+
+export const Required: StoryFn<
+  ComponentProps<typeof SelectableCardGroupField>
+> = args => (
+  <Stack gap={1}>
+    <SelectableCardGroupField {...args}>
+      <SelectableCardGroupField.Card value="checkbox-1" label="Checkbox 1" />
+      <SelectableCardGroupField.Card value="checkbox-2" label="Checkbox 2" />
+      <SelectableCardGroupField.Card value="checkbox-3" label="Checkbox 3" />
+      <SelectableCardGroupField.Card value="checkbox-4" label="Checkbox 4" />
+    </SelectableCardGroupField>
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+Required.args = {
+  name: 'mySelectableCardGroup',
+  legend: 'Checkbox',
+  showTick: true,
+  required: true,
+  type: 'checkbox',
+  columns: 2,
+}

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

@@ -0,0 +1,18 @@
+import type { StoryFn } from '@storybook/react'
+import type { ComponentProps } from 'react'
+import { SelectableCardGroupField } from '../..'
+
+export const Template: StoryFn<
+  ComponentProps<typeof SelectableCardGroupField>
+> = args => (
+  <SelectableCardGroupField {...args}>
+    <SelectableCardGroupField.Card value="radio 1" label="Radio 1" />
+    <SelectableCardGroupField.Card value="radio 2" label="Radio 2" />
+  </SelectableCardGroupField>
+)
+
+Template.args = {
+  name: 'mySelectableCardGroup',
+  legend: 'Legend label',
+  showTick: true,
+}

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

@@ -0,0 +1,83 @@
+import type { Meta } from '@storybook/react'
+import { Snippet, Stack, Text } from '@ultraviolet/ui'
+import { useForm } from 'react-hook-form'
+import { Form, SelectableCardGroupField } from '../..'
+import { mockErrors } from '../../../mocks'
+
+export default {
+  component: SelectableCardGroupField,
+  subcomponents: {
+    'SelectableCardGroupField.Card': SelectableCardGroupField.Card,
+  },
+  decorators: [
+    ChildStory => {
+      const methods = useForm()
+      const {
+        errors,
+        isDirty,
+        isSubmitting,
+        touchedFields,
+        submitCount,
+        dirtyFields,
+        isValid,
+        isLoading,
+        isSubmitted,
+        isValidating,
+        isSubmitSuccessful,
+      } = methods.formState
+
+      return (
+        <Form onRawSubmit={() => {}} errors={mockErrors} methods={methods}>
+          <Stack gap={2}>
+            {ChildStory()}
+            <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 group of Selectable cards field',
+      },
+    },
+  },
+  title: 'Form/Components/Fields/SelectableCardGroupField',
+} as Meta
+
+export { Playground } from './Playground.stories'
+export { Checkbox } from './Checkbox'
+export { Required } from './Required.stories'
+export { Error } from './Error.stories'