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

feat(WEB-304): remaning UI from design system primitives

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
components/MyProfile/Profile/Edit/Form/Content.tsx
View File

@@ -1,146 +1,27 @@
"use client"
import { useEffect } from "react"
import { useFormStatus } from "react-dom"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
// import { useWatch } from "react-hook-form"
// import { useIntl } from "react-intl"
import { useProfileStore } from "@/stores/edit-profile"
import {
CalendarIcon,
EmailIcon,
HouseIcon,
PhoneIcon,
} from "@/components/Icons"
import Field from "@/components/MyProfile/Field"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import type { EditFormContentProps } from "@/types/components/myPages/myProfile/edit"
export default function FormContent({ control }: EditFormContentProps) {
const { formatMessage } = useIntl()
// const { formatMessage } = useIntl()
const { pending } = useFormStatus()
const setIsPending = useProfileStore((store) => store.setIsPending)
const country = useWatch({ name: "address.country" })
// const country = useWatch({ name: "address.country" })
useEffect(() => {
setIsPending(pending)
}, [pending, setIsPending])
const city = formatMessage({ id: "City" })
const email = formatMessage({ id: "Email" })
const street = formatMessage({ id: "Street" })
const zipCode = formatMessage({ id: "Zip code" })
// const city = formatMessage({ id: "City" })
// const email = formatMessage({ id: "Email" })
// const street = formatMessage({ id: "Street" })
// const zipCode = formatMessage({ id: "Zip code" })
return (
<>
<Field>
<Field.Icon>{country}</Field.Icon>
<Field.Label htmlFor="address.country">
*{formatMessage({ id: "Country" })}
</Field.Label>
<Field.Content>
<CountrySelect name="address.country" />
</Field.Content>
</Field>
<Field>
<Field.Icon>
<CalendarIcon />
</Field.Icon>
<Field.Label htmlFor="dateOfBirth">
*{formatMessage({ id: "Date of Birth" })}
</Field.Label>
<Field.Content>
<DateSelect
control={control}
name="dateOfBirth"
registerOptions={{ required: true }}
/>
</Field.Content>
</Field>
<Field>
<Field.Icon>
<EmailIcon />
</Field.Icon>
<Field.Label htmlFor="email">*{email}</Field.Label>
<Field.Content>
<Input
aria-label={email}
control={control}
name="email"
placeholder={email}
registerOptions={{ required: true }}
type="email"
/>
</Field.Content>
</Field>
<Field>
<Field.Icon>
<PhoneIcon />
</Field.Icon>
<Field.Label htmlFor="phoneNumber">
*{formatMessage({ id: "Phone" })}
</Field.Label>
<Field.Content>
<Phone countrySelectName="address.country" name="phoneNumber" />
</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.Label htmlFor="address.streetAddress">
{formatMessage({ id: "Address" })}
</Field.Label>
<Field.Content>
<Input
aria-label={street}
control={control}
name="address.streetAddress"
placeholder={street}
/>
</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.Label htmlFor="address.city">
{formatMessage({ id: "City/State" })}
</Field.Label>
<Field.Content>
<Input
aria-label={city}
control={control}
name="address.city"
placeholder={city}
/>
</Field.Content>
</Field>
<Field>
<Field.Icon>
<HouseIcon />
</Field.Icon>
<Field.Label htmlFor="address.zipCode">*{zipCode}</Field.Label>
<Field.Content>
<Input
aria-label={zipCode}
control={control}
name="address.zipCode"
placeholder={zipCode}
registerOptions={{ required: true }}
/>
</Field.Content>
</Field>
</>
)
return <></>
}

2
components/MyProfile/Profile/Edit/Form/form.module.css
View File

@@ -1,5 +1,5 @@
.form {
display: grid;
gap: 1.8rem;
gap: var(--Spacing-x2);
grid-template-columns: 1fr 1fr;
}