Activity Goal Card

"use client"

import { useState } from "react"

import { ActivityGoalCard } from "@/components/card/activity-goal-card"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "TOOLSHARE / REPAIR CAFÉ",
  title: "Set next week’s volunteer hours",
  description: "Use the last 8 weeks to plan the Saturday rota.",
  summary: "How many people is that?",
  covers: "hours covers",
  shifts:
    "two-hour shifts. Include at least one electrical repairer and one textiles volunteer per session.",
  footnote: "Hours worked, oldest first: 18, 24, 22, 30, 26, 20, 28, 24.",
  decrease: "Plan two fewer volunteer hours",
  increase: "Plan two more volunteer hours",
  unit: "hours / week",
  range: "12 Sep–31 Oct",
  series: "Volunteer hours",
  met: "of 8 weeks met this",
} as const

const WEEKS = [
  { id: "w1", name: "12 Sep", value: 18 },
  { id: "w2", name: "19 Sep", value: 24 },
  { id: "w3", name: "26 Sep", value: 22 },
  { id: "w4", name: "3 Oct", value: 30 },
  { id: "w5", name: "10 Oct", value: 26 },
  { id: "w6", name: "17 Oct", value: 20 },
  { id: "w7", name: "24 Oct", value: 28 },
  { id: "w8", name: "31 Oct", value: 24 },
] as const

/** An Activity Goal Card with a volunteer-hours target you can raise or lower, and a folded shift estimate. */
export default function ActivityGoalCardVolunteerHours() {
  const [target, setTarget] = useState(24)
  return (
    <div className="w-full max-w-md rounded-2xl bg-muted p-4 text-base text-foreground [--font-display:var(--font-sans)]">
      <Eyebrow
        variant="caps"
        tone="ink"
        className="px-2 pt-2 pb-5 font-semibold tracking-wider"
      >
        {COPY.eyebrow}
      </Eyebrow>
      <ActivityGoalCard
        size="sm"
        title={COPY.title}
        description={COPY.description}
        data={WEEKS.map((week) => ({ ...week }))}
        value={target}
        onValueChange={setTarget}
        limits={{ min: 8, max: 40, step: 2 }}
        labels={{
          decrease: COPY.decrease,
          increase: COPY.increase,
          unit: COPY.unit,
          range: COPY.range,
          series: COPY.series,
          met: (count) => `${count} ${COPY.met}`,
        }}
        actions={
          <Collapsible className="w-full text-sm/6">
            <CollapsibleTrigger className="w-full cursor-pointer text-left font-medium focus-visible:outline-2 focus-visible:outline-offset-4">
              {COPY.summary}
            </CollapsibleTrigger>
            <CollapsibleContent>
              <p className="mt-3">
                {target} {COPY.covers} {target / 2} {COPY.shifts}
              </p>
              <p className="mt-3 text-xs/5">{COPY.footnote}</p>
            </CollapsibleContent>
          </Collapsible>
        }
        className="rounded-xl shadow-none ring-0 [&_[role=status]]:flex-wrap [&_[role=status]]:justify-center [&_figcaption]:flex-wrap [&_figcaption]:gap-x-3"
      />
    </div>
  )
}

"use client"

import type { ComponentProps, ReactNode } from "react"
import { MinusIcon, PlusIcon } from "@phosphor-icons/react"
import { cn } from "cn"
import { Bar, BarChart, Rectangle, ReferenceLine } from "recharts"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { ChartContainer, type ChartConfig } from "@/components/ui/chart"
import { Separator } from "@/components/ui/separator"

/** One observation in the activity chart, compared with the current goal. */
type ActivityGoalEntry = {
  /** An identifier for the observation; it is not displayed by the card. */
  id: string
  /** A label for the observation; it is not displayed by the card. */
  name: string
  /** The measured amount, which sets the bar height. */
  value: number
}

/** Content and controlled goal settings, plus the stock `Card` props. */
type ActivityGoalCardProps = Omit<
  ComponentProps<typeof Card>,
  "title" | "children"
> & {
  /** The card's heading. */
  title: ReactNode
  /** Muted supporting text below the heading. */
  description?: ReactNode
  /** Observations in chart order; bars meeting the goal use the art accent. */
  data: readonly ActivityGoalEntry[]
  /** The current goal, shown above the chart and as its reference line. */
  value: number
  /** Called with the adjusted goal, clamped to `limits.min` and `limits.max`. */
  onValueChange: (value: number) => void
  /** Bounds and increment used by the decrease and increase buttons. */
  limits: {
    /** The lowest goal the buttons allow. */
    min: number
    /** The highest goal the buttons allow. */
    max: number
    /** The amount added or subtracted on each button press. */
    step: number
  }
  /** Button names, chart labels and the goal summary text. */
  labels: {
    /** The accessible name of the decrease button. */
    decrease: string
    /** The accessible name of the increase button. */
    increase: string
    /** The small uppercase unit beside the goal value. */
    unit: ReactNode
    /** The period label below the chart, such as "Last 7 days". */
    range: ReactNode
    /** The series label supplied to the chart configuration. */
    series: string
    /** Returns summary text for the number of observations meeting the goal. */
    met: (count: number) => ReactNode
  }
  /** Controls or links placed in the card's footer. */
  actions?: ReactNode
}

/**
 * A card with an adjustable activity goal and a bar chart of observations.
 * The buttons request a new goal through `onValueChange`; the caller owns
 * `value`. Bars meeting the goal are highlighted, with a summary below.
 *
 * It takes no children. `className` and other props land on the `Card`.
 */
function ActivityGoalCard({
  title,
  description,
  data,
  value,
  onValueChange,
  limits,
  labels,
  actions,
  className,
  ...props
}: ActivityGoalCardProps) {
  const met = data.filter((entry) => entry.value >= value).length
  const chartConfig = { value: { label: labels.series } } satisfies ChartConfig

  function adjust(by: number) {
    onValueChange(Math.max(limits.min, Math.min(limits.max, value + by)))
  }

  return (
    <Card
      data-slot="activity-goal-card"
      className={cn("gap-8", className)}
      {...props}
    >
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        {description != null && (
          <CardDescription>{description}</CardDescription>
        )}
      </CardHeader>
      <CardContent className="grid gap-8">
        <p className="flex items-center justify-between gap-4">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => adjust(-limits.step)}
            disabled={value <= limits.min}
            focusableWhenDisabled
            className="data-disabled:pointer-events-none data-disabled:opacity-50"
          >
            <MinusIcon aria-hidden="true" />
            <span className="sr-only">{labels.decrease}</span>
          </Button>
          <span role="status" className="flex items-baseline gap-2">
            <span className="font-display text-5xl tracking-tight tabular-nums">
              {value}
            </span>
            <span className="font-mono text-xs tracking-widest text-muted-foreground uppercase">
              {labels.unit}
            </span>
          </span>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => adjust(limits.step)}
            disabled={value >= limits.max}
            focusableWhenDisabled
            className="data-disabled:pointer-events-none data-disabled:opacity-50"
          >
            <PlusIcon aria-hidden="true" />
            <span className="sr-only">{labels.increase}</span>
          </Button>
        </p>
        <figure className="grid gap-3">
          <ChartContainer config={chartConfig} className="h-28 w-full">
            <BarChart
              data={[...data]}
              barCategoryGap={6}
              margin={{ top: 4, bottom: 0 }}
            >
              <ReferenceLine
                y={value}
                ifOverflow="extendDomain"
                stroke="var(--art-accent)"
                strokeDasharray="2 4"
                strokeWidth={1}
              />
              <Bar
                dataKey="value"
                radius={0}
                maxBarSize={3}
                shape={(barProps) => (
                  <Rectangle
                    {...barProps}
                    fill={
                      typeof barProps.value === "number" &&
                      barProps.value >= value
                        ? "var(--art-accent)"
                        : "var(--muted-foreground)"
                    }
                  />
                )}
              />
            </BarChart>
          </ChartContainer>
          <Separator />
          <figcaption className="flex items-baseline justify-between">
            <span className="font-mono text-xs tracking-widest text-muted-foreground uppercase">
              {labels.range}
            </span>
            <span className="text-sm/7 tabular-nums">{labels.met(met)}</span>
          </figcaption>
        </figure>
      </CardContent>
      {actions != null && <CardFooter>{actions}</CardFooter>}
    </Card>
  )
}

export { ActivityGoalCard }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }