feat(WEB-170): edit profile view

components/TempDesignSystem/Form/Date/Select/index.tsx

@@ -0,0 +1,82 @@
+"use client"
+import { useEffect, useRef, useState, type FocusEvent } from "react"
+
+import {
+  Button,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Select as ReactAriaSelect,
+  SelectValue,
+  type Key,
+} from "react-aria-components"
+import SelectChevron from "../../SelectChevron"
+
+import styles from "./select.module.css"
+
+import type { SelectProps } from "./select"
+
+export default function Select({
+  items,
+  label,
+  name,
+  onSelect,
+  placeholder,
+  value,
+}: SelectProps) {
+  const divRef = useRef<HTMLDivElement>(null)
+  const [divElement, setDivElement] = useState(divRef.current)
+
+  function handleOnSelect(key: Key) {
+    onSelect(key, name)
+  }
+
+  useEffect(() => {
+    if (divRef.current) {
+      setDivElement(divRef.current)
+    }
+  }, [divRef.current])
+
+  return (
+    <div className={styles.date} ref={divRef}>
+      <ReactAriaSelect
+        className={styles.select}
+        onSelectionChange={handleOnSelect}
+        placeholder={placeholder}
+        selectedKey={value as Key}
+      >
+        <Label className={styles.label}>{label}</Label>
+        <Button className={styles.input}>
+          <SelectValue />
+          <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={divElement ?? undefined}
+        >
+          <ListBox className={styles.listBox}>
+            {items.map((item) => (
+              <ListBoxItem
+                key={item}
+                className={styles.listBoxItem}
+                id={item}
+                textValue={String(item)}
+              >
+                {item}
+              </ListBoxItem>
+            ))}
+          </ListBox>
+        </Popover>
+      </ReactAriaSelect>
+    </div>
+  )
+}

components/TempDesignSystem/Form/Date/Select/select.module.css

@@ -0,0 +1,54 @@
+.date {
+  position: relative;
+}
+
+.label {
+  font-family: var(--ff-fira-sans);
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+
+.select {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.input {
+  align-items: center;
+  background-color: var(--some-white-color, #fff);
+  border: var(--border);
+  border-radius: var(--radius);
+  color: var(--some-black-color, #757575);
+  display: grid;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  gap: 1rem;
+  grid-template-columns: 1fr auto;
+  height: 4rem;
+  letter-spacing: -1.5%;
+  line-height: 2.4rem;
+  padding: 0.8rem 1rem 0.8rem 1.6rem;
+}
+
+.popover {
+  background-color: var(--some-white-color, #fff);
+  border: var(--border);
+  border-radius: var(--radius);
+  overflow: auto;
+  width: 100%;
+}
+
+.listBox {
+  padding: 1.6rem 1.6rem 1.6rem 0.8rem;
+}
+
+.listBoxItem {
+  padding: 0 0.8rem;
+}
+
+.listBoxItem[data-selected="true"],
+.listBoxItem[data-focused="true"] {
+  background-color: rgba(75, 75, 75, 0.2);
+}

components/TempDesignSystem/Form/Date/Select/select.ts

@@ -0,0 +1,16 @@
+import type { Key } from "react-aria-components"
+
+export const enum DateName {
+  date = "date",
+  month = "month",
+  year = "year",
+}
+
+export interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onSelect"> {
+  items: number[]
+  label: string
+  name: DateName
+  onSelect: (key: Key, name: DateName) => void
+  placeholder?: string
+}

components/TempDesignSystem/Form/Date/date.module.css

@@ -0,0 +1,30 @@
+.container {
+  --border: 2px solid var(--some-black-color, #757575);
+  --radius: 0.4rem;
+  --width: min(28rem, 100%);
+
+  --width-day: 6rem;
+  --width-month: 6rem;
+  --width-year: 8rem;
+
+  display: grid;
+  gap: 0.8rem;
+  grid-template-areas: "day month year";
+  grid-template-columns: min(--width-day, 1fr) min(--width-month, 1fr) min(
+      --width-year,
+      2fr
+    );
+  width: var(--width);
+}
+
+.day {
+  grid-area: day;
+}
+
+.month {
+  grid-area: month;
+}
+
+.year {
+  grid-area: year;
+}

components/TempDesignSystem/Form/Date/date.ts

@@ -0,0 +1,9 @@
+import type { Control, RegisterOptions } from "react-hook-form"
+import type { EditProfileSchema } from "@/components/MyProfile/Profile/Edit/Form/schema"
+
+export interface DateProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  control: Control<EditProfileSchema>
+  name: keyof EditProfileSchema
+  registerOptions: RegisterOptions<EditProfileSchema>
+}

components/TempDesignSystem/Form/Date/index.tsx

@@ -0,0 +1,120 @@
+"use client"
+import { parseDate } from "@internationalized/date"
+import { useController, useFormContext, useWatch } from "react-hook-form"
+
+import { _ } from "@/lib/translation"
+import { dt } from "@/lib/dt"
+import { rangeArray } from "@/utils/rangeArray"
+
+import {
+  DateInput,
+  DatePicker,
+  DateSegment,
+  Group,
+} from "react-aria-components"
+import Select from "./Select"
+
+import styles from "./date.module.css"
+
+import { DateName } from "./Select/select"
+import type { DateProps } from "./date"
+import type { Key } from "react-aria-components"
+
+/** TODO: Get selecting with Enter-key to work */
+export default function DateSelect({
+  control,
+  name,
+  registerOptions,
+}: DateProps) {
+  const d = useWatch({ name })
+  const { setValue } = useFormContext()
+  const { field } = useController({
+    control,
+    name,
+    rules: registerOptions,
+  })
+  const currentYear = new Date().getFullYear()
+  const months = rangeArray(1, 12)
+  const years = rangeArray(1900, currentYear).reverse()
+
+  function handleOnSelect(select: Key, selector: DateName) {
+    /**
+     * Months are 0 index based and therefore we
+     * must subtract by 1 to get the selected month
+     */
+    if (selector === DateName.month) {
+      select = Number(select) - 1
+    }
+    const newDate = dt(d).set(selector, Number(select))
+    setValue(name, newDate.format("YYYY-MM-DD"))
+  }
+
+  return (
+    <DatePicker
+      granularity="day"
+      isRequired={!!registerOptions.required}
+      name={name}
+      ref={field.ref}
+      value={parseDate(d)}
+    >
+      <Group>
+        <DateInput className={styles.container}>
+          {(segment) => {
+            switch (segment.type) {
+              case "day":
+                let days = []
+                if (segment.maxValue && segment.minValue) {
+                  days = rangeArray(segment.minValue, segment.maxValue)
+                } else {
+                  days = Array.from(Array(segment.maxValue).keys()).map(
+                    (i) => i + 1
+                  )
+                }
+                return (
+                  <DateSegment className={styles.day} segment={segment}>
+                    <Select
+                      items={days}
+                      label={_("Day")}
+                      name={DateName.date}
+                      onSelect={handleOnSelect}
+                      placeholder={_("DD")}
+                      value={segment.value}
+                    />
+                  </DateSegment>
+                )
+              case "month":
+                return (
+                  <DateSegment className={styles.month} segment={segment}>
+                    <Select
+                      items={months}
+                      label={_("Month")}
+                      name={DateName.month}
+                      onSelect={handleOnSelect}
+                      placeholder={_("MM")}
+                      value={segment.value}
+                    />
+                  </DateSegment>
+                )
+              case "year":
+                return (
+                  <DateSegment className={styles.year} segment={segment}>
+                    <Select
+                      items={years}
+                      label={_("Year")}
+                      name={DateName.year}
+                      onSelect={handleOnSelect}
+                      placeholder={_("YYYY")}
+                      value={segment.value}
+                    />
+                  </DateSegment>
+                )
+              default:
+                /** DateInput forces return of ReactElement */
+                return <></>
+            }
+          }}
+        </DateInput>
+      </Group>
+    </DatePicker>
+  )
+}