scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: loosen up the zod validations and return null instead of throwing

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 5c50ac060d
commit aca9221ea6
89 changed files with 1117 additions and 821 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/TempDesignSystem/Form/Country/country.module.css
View File

@@ -23,12 +23,6 @@
.input,
.listBoxItem {
color: var(--UI-Grey-60);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
font-weight: var(--typography-Body-Regular-fontWeight);
letter-spacing: var--typography-Body-Regular-letterSpacing;
line-height: var(--typography-Body-Regular-lineHeight);
}
.button {

31
components/TempDesignSystem/Form/Country/index.tsx
View File

@@ -14,6 +14,8 @@ import {
import { useController, useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import Body from "@/components/TempDesignSystem/Text/Body"
import SelectChevron from "../SelectChevron"
import { countries } from "./countries"
@@ -53,11 +55,13 @@ export default function CountrySelect({
selectedKey={field.value}
>
<div className={styles.comboBoxContainer}>
<Input
aria-label={selectCountryLabel}
className={styles.input}
placeholder={selectCountryLabel}
/>
<Body asChild fontOnly>
<Input
aria-label={selectCountryLabel}
className={styles.input}
placeholder={selectCountryLabel}
/>
</Body>
<Button className={styles.button}>
<SelectChevron />
</Button>
@@ -79,14 +83,15 @@ export default function CountrySelect({
>
<ListBox>
{countries.map((country, idx) => (
<ListBoxItem
aria-label={country.name}
className={styles.listBoxItem}
id={country.code}
key={`${country.code}-${idx}`}
>
{country.name}
</ListBoxItem>
<Body asChild fontOnly key={`${country.code}-${idx}`}>
<ListBoxItem
aria-label={country.name}
className={styles.listBoxItem}
id={country.code}
>
{country.name}
</ListBoxItem>
</Body>
))}
</ListBox>
</Popover>

4
components/TempDesignSystem/Form/ErrorMessage/error.module.css
View File

@@ -1,8 +1,4 @@
.message {
color: var(--Scandic-Red-60);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
line-height: var(--typography-Body-Regular-lineHeight);
margin: var(--Spacing-x-half) 0 0;
}

8
components/TempDesignSystem/Form/ErrorMessage/index.tsx
View File

@@ -1,5 +1,7 @@
import { ErrorMessage as RHFErrorMessage } from "@hookform/error-message"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./error.module.css"
import type { ErrorMessageProps } from "./errorMessage"
@@ -12,7 +14,11 @@ export default function ErrorMessage<T>({
<RHFErrorMessage
errors={errors}
name={name}
render={({ message }) => <p className={styles.message}>{message}</p>}
render={({ message }) => (
<Body className={styles.message} fontOnly>
{message}
</Body>
)}
/>
)
}

13
components/TempDesignSystem/Form/Input/index.tsx
View File

@@ -3,6 +3,7 @@ import { Input as AriaInput, TextField } from "react-aria-components"
import { useController } from "react-hook-form"
import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./input.module.css"
@@ -35,11 +36,13 @@ export default function Input({
onChange={field.onChange}
type={type}
>
<AriaInput
className={styles.input}
placeholder={placeholder}
ref={field.ref}
/>
<Body asChild fontOnly>
<AriaInput
className={styles.input}
placeholder={placeholder}
ref={field.ref}
/>
</Body>
<ErrorMessage errors={formState.errors} name={name} />
</TextField>
)

5
components/TempDesignSystem/Form/Input/input.module.css
View File

@@ -2,12 +2,7 @@
border: 2px solid var(--UI-Grey-60);
border-radius: var(--Corner-radius-Small);
color: var(--UI-Grey-60);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
height: 40px;
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
padding: var(--Spacing-x1) var(--Spacing-x2);
width: min(280px, 100%);
}

72
components/TempDesignSystem/Form/Select/index.tsx
View File

@@ -11,6 +11,8 @@ import {
SelectValue,
} from "react-aria-components"
import Body from "../../Text/Body"
import Footnote from "../../Text/Footnote"
import SelectChevron from "../SelectChevron"
import styles from "./select.module.css"
@@ -48,38 +50,44 @@ export default function Select({
placeholder={placeholder}
selectedKey={value as Key}
>
<Button className={styles.input}>
<div className={styles.inputContentWrapper}>
<Label className={styles.label}>{label}</Label>
<SelectValue />
</div>
<SelectChevron />
</Button>
<Popover
className={styles.popover}
placement="bottom"
shouldFlip={false}
/**
* react-aria uses portals to render Popover in body
* unless otherwise specified. We need it to be contained
* by this component to both access css variables assigned
* on the container as well as to not overflow it at any time.
*/
UNSTABLE_portalContainer={rootDiv ?? undefined}
>
<ListBox className={styles.listBox}>
{items.map((item) => (
<ListBoxItem
aria-label={String(item)}
className={styles.listBoxItem}
id={item.value}
key={item.label}
>
{item.label}
</ListBoxItem>
))}
</ListBox>
</Popover>
<Body asChild fontOnly>
<Button className={styles.input}>
<div className={styles.inputContentWrapper}>
<Footnote asChild fontOnly>
<Label className={styles.label}>{label}</Label>
</Footnote>
<SelectValue />
</div>
<SelectChevron />
</Button>
</Body>
<Body asChild fontOnly>
<Popover
className={styles.popover}
placement="bottom"
shouldFlip={false}
/**
* react-aria uses portals to render Popover in body
* unless otherwise specified. We need it to be contained
* by this component to both access css variables assigned
* on the container as well as to not overflow it at any time.
*/
UNSTABLE_portalContainer={rootDiv ?? undefined}
>
<ListBox className={styles.listBox}>
{items.map((item) => (
<ListBoxItem
aria-label={String(item)}
className={styles.listBoxItem}
id={item.value}
key={item.label}
>
{item.label}
</ListBoxItem>
))}
</ListBox>
</Popover>
</Body>
</ReactAriaSelect>
</div>
)

12
components/TempDesignSystem/Form/Select/select.module.css
View File

@@ -4,10 +4,6 @@
.label {
color: var(--Base-Text-UI-Placeholder);
font-family: var(--typography-Footnote-Regular-fontFamily);
font-size: var(--typography-Footnote-Regular-fontSize);
font-weight: var(--typography-Footnote-Regular-fontWeight);
line-height: var(--typography-Footnote-Regular-lineHeight);
}
.select {
@@ -32,11 +28,6 @@
display: flex;
gap: var(--Spacing-x-half);
height: 56px;
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
outline: none;
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
text-align: left;
@@ -56,7 +47,6 @@
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
display: inline-flex;
flex-direction: column;
font-size: var(--typography-Body-Regular-fontSize);
gap: var(--Spacing-x1);
overflow: auto;
width: 100%;
@@ -79,4 +69,4 @@
.listBoxItem[data-selected="true"] {
font-weight: 500;
}
}