Rating

import * as React from 'react'
import { Rating } from '@hamur/react/rating'

const stars = [1, 2, 3, 4, 5]

export default function RatingHalfExample() {
  const [value, setValue] = React.useState<number | null>(2.5)
  const [preview, setPreview] = React.useState<number | null>(null)
  return (
    <div className="field">
      <span id="rating-half-label" className="rating-label">
        Sound quality
      </span>
      <Rating.Root
        className="rating"
        step={0.5}
        value={value}
        onValueChange={setValue}
        onPreviewValueChange={setPreview}
        aria-labelledby="rating-half-label"
      >
        {stars.map((star) => (
          <Rating.Item key={star} value={star} className="rating-item" />
        ))}
        <Rating.Value className="rating-value" />
      </Rating.Root>
      <p className="muted">
        Value: {value ?? 'none'}. Preview: {preview ?? 'none'}.
      </p>
    </div>
  )
}

import * as React from 'react'
import { Field } from '@hamur/react/field'
import { Form } from '@hamur/react/form'
import { Rating } from '@hamur/react/rating'

const stars = [1, 2, 3, 4, 5]

export default function RatingFormExample() {
  const [submitted, setSubmitted] = React.useState('')
  return (
    <Form
      className="stack"
      onFormSubmit={(_values, details) => {
        const form = details.event.target as HTMLFormElement
        setSubmitted([...new FormData(form)].map(([key, value]) => `${key}=${value}`).join('&'))
      }}
    >
      <Field.Root name="stay" className="field">
        <Field.Label className="rating-label">Rate your stay</Field.Label>
        <Rating.Root className="rating" required>
          {stars.map((star) => (
            <Rating.Item key={star} value={star} className="rating-item" />
          ))}
        </Rating.Root>
        <Field.Description className="muted">
          From 1 star (poor) to 5 (excellent).
        </Field.Description>
        <Field.Error className="error" match="valueMissing">
          Choose a rating before you send.
        </Field.Error>
      </Field.Root>
      <button className="button" type="submit">
        Send
      </button>
      {submitted ? <pre className="output">{submitted}</pre> : null}
    </Form>
  )
}

import { Rating } from '@hamur/react/rating'

const stars = [1, 2, 3, 4, 5]

export default function RatingReadOnlyExample() {
  return (
    <div className="stack">
      <div className="field">
        <span id="rating-read-only-label" className="rating-label">
          Your last rating (read-only)
        </span>
        <Rating.Root
          className="rating"
          readOnly
          defaultValue={4}
          aria-labelledby="rating-read-only-label"
        >
          {stars.map((star) => (
            <Rating.Item key={star} value={star} className="rating-item" />
          ))}
          <Rating.Value className="rating-value" />
        </Rating.Root>
      </div>
      <div className="field">
        <span id="rating-disabled-label" className="rating-label">
          Delivery (disabled until it arrives)
        </span>
        <Rating.Root
          className="rating"
          disabled
          defaultValue={2}
          aria-labelledby="rating-disabled-label"
        >
          {stars.map((star) => (
            <Rating.Item key={star} value={star} className="rating-item" />
          ))}
          <Rating.Value className="rating-value" />
        </Rating.Root>
      </div>
    </div>
  )
}

import { DirectionProvider } from '@hamur/react/direction-provider'
import { Rating } from '@hamur/react/rating'

const faces = [
  { value: 1, label: 'Very bad', mouth: 'M8 17q4-4 8 0' },
  { value: 2, label: 'Bad', mouth: 'M8 16.5q4-2 8 0' },
  { value: 3, label: 'Okay', mouth: 'M8 15.5h8' },
  { value: 4, label: 'Good', mouth: 'M8 14.5q4 2 8 0' },
  { value: 5, label: 'Very good', mouth: 'M8 14q4 4 8 0' },
]

export default function RatingCustomExample() {
  return (
    <DirectionProvider direction="rtl">
      <div dir="rtl" className="field">
        <span id="rating-custom-label" className="rating-label">
          How was your visit?
        </span>
        <Rating.Root
          className="rating rating-faces"
          orientation="vertical"
          defaultValue={4}
          aria-labelledby="rating-custom-label"
        >
          {faces.map((face) => (
            <Rating.Item
              key={face.value}
              value={face.value}
              aria-label={face.label}
              className="rating-face"
            >
              <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
                <circle cx="12" cy="12" r="9.5" />
                <circle cx="9" cy="10" r="1" className="rating-face-eye" />
                <circle cx="15" cy="10" r="1" className="rating-face-eye" />
                <path d={face.mouth} />
              </svg>
              {face.label}
            </Rating.Item>
          ))}
        </Rating.Root>
      </div>
    </DirectionProvider>
  )
}