chore: Reorganize components (#230)

CONTRIBUTING.md

@@ -65,10 +65,13 @@ Now that the development app is running, let's get familiar with what's inside.
 📂 e2e             # End-to-end Playwright tests
 📂 public          # Images, favicons, and other unprocessed assets
 📂 src             # Frontend application
-├── 📂 components  # Shared components
+└── 📂 components  # Shared components
+    ├── 📂 app     # App-related global components (logos, sidebar, etc.)
+    ├── 📂 common  # Design system components from React Aria
+    └── 📂 quests  # Feature-specific quest components
 ├── 📂 routes      # File-based routing using TanStack Router
-├── 📂 styles      # Global CSS (not much here, most of it's in Tailwind!)
-└── main.tsx       # Base of the project including common Providers
+├── 📂 styles      # Global CSS (not much here; most of it's in Tailwind!)
+└── 📄 main.tsx    # Base of the project including common Providers
 ```
 
 ## Dependencies

src/components/AppSidebar/AppSidebar.tsx → src/components/app/AppSidebar/AppSidebar.tsx

@@ -1,23 +1,23 @@
+import {
+  Badge,
+  Button,
+  Link,
+  Menu,
+  MenuItem,
+  MenuSeparator,
+  MenuTrigger,
+  Popover,
+  SubmenuTrigger,
+  Tooltip,
+  TooltipTrigger,
+} from "@/components/common";
 import { useTheme } from "@/utils/useTheme";
 import { useAuthActions } from "@convex-dev/auth/react";
 import { api } from "@convex/_generated/api";
 import { THEMES, type Theme } from "@convex/constants";
 import { Authenticated, useQuery } from "convex/react";
 import { CircleUser, Cog, GlobeLock, LogOut, Plus } from "lucide-react";
-import { Badge } from "../Badge";
-import { Button } from "../Button";
-import { Link } from "../Link";
 import { Logo } from "../Logo";
-import {
-  Menu,
-  MenuItem,
-  MenuSeparator,
-  MenuTrigger,
-  SubmenuTrigger,
-} from "../Menu";
-import { Popover } from "../Popover";
-import { Tooltip } from "../Tooltip";
-import { TooltipTrigger } from "../Tooltip";
 
 type AppSidebarProps = {
   children: React.ReactNode;

src/components/PageHeader/PageHeader.stories.tsx → src/components/app/PageHeader/PageHeader.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Badge } from "../Badge";
-import { Button } from "../Button";
+import { Badge, Button } from "@/components/common";
 import { PageHeader } from "./PageHeader";
 
 const meta = {

src/components/app/index.ts

@@ -0,0 +1,4 @@
+export * from "./AppContent";
+export * from "./AppSidebar";
+export * from "./Logo";
+export * from "./PageHeader";

src/components/Breadcrumbs/Breadcrumbs.tsx → src/components/common/Breadcrumbs/Breadcrumbs.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps } from "@/components/utils";
 import { ChevronRight } from "lucide-react";
 import {
   Breadcrumb as AriaBreadcrumb,
@@ -8,7 +9,6 @@ import {
 } from "react-aria-components";
 import { twMerge } from "tailwind-merge";
 import { Link } from "../Link";
-import { composeTailwindRenderProps } from "../utils";
 
 export function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>) {
   return (

src/components/Button/Button.tsx → src/components/common/Button/Button.tsx

@@ -1,11 +1,11 @@
+import { focusRing } from "@/components/utils";
 import type { LucideIcon } from "lucide-react";
 import {
   Button as AriaButton,
   type ButtonProps as AriaButtonProps,
   composeRenderProps,
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
-import { focusRing } from "../utils";
 
 export interface ButtonProps extends AriaButtonProps {
   children?: React.ReactNode;

src/components/Calendar/Calendar.tsx → src/components/common/Calendar/Calendar.tsx

@@ -1,3 +1,4 @@
+import { focusRing } from "@/components/utils";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import {
   Calendar as AriaCalendar,
@@ -14,7 +15,6 @@ import {
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
 import { Button } from "../Button";
-import { focusRing } from "../utils";
 
 const cellStyles = tv({
   extend: focusRing,

src/components/Checkbox/Checkbox.tsx → src/components/common/Checkbox/Checkbox.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps, focusRing } from "@/components/utils";
 import { Check, Minus } from "lucide-react";
 import type { ReactNode } from "react";
 import {
@@ -10,7 +11,6 @@ import {
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
 import { FieldDescription, FieldError, Label } from "../Field";
-import { composeTailwindRenderProps, focusRing } from "../utils";
 
 export interface CheckboxGroupProps
   extends Omit<AriaCheckboxGroupProps, "children"> {

src/components/ComboBox/ComboBox.tsx → src/components/common/ComboBox/ComboBox.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps } from "@/components/utils";
 import { ChevronDown } from "lucide-react";
 import type React from "react";
 import {
@@ -21,7 +22,6 @@ import {
   type DropdownSectionProps,
 } from "../ListBox";
 import { Popover } from "../Popover";
-import { composeTailwindRenderProps } from "../utils";
 
 export interface ComboBoxProps<T extends object>
   extends Omit<AriaComboBoxProps<T>, "children"> {

src/components/DateField/DateField.tsx → src/components/common/DateField/DateField.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps } from "@/components/utils";
 import {
   DateField as AriaDateField,
   type DateFieldProps as AriaDateFieldProps,
@@ -14,7 +15,6 @@ import {
   Label,
   fieldGroupStyles,
 } from "../Field";
-import { composeTailwindRenderProps } from "../utils";
 
 export interface DateFieldProps<T extends DateValue>
   extends AriaDateFieldProps<T> {

src/components/DatePicker/DatePicker.tsx → src/components/common/DatePicker/DatePicker.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps } from "@/components/utils";
 import { Calendar as CalendarIcon } from "lucide-react";
 import {
   DatePicker as AriaDatePicker,
@@ -11,7 +12,6 @@ import { DateInput } from "../DateField";
 import { Dialog } from "../Dialog";
 import { FieldDescription, FieldError, FieldGroup, Label } from "../Field";
 import { Popover } from "../Popover";
-import { composeTailwindRenderProps } from "../utils";
 
 export interface DatePickerProps<T extends DateValue>
   extends AriaDatePickerProps<T> {

src/components/DateRangePicker/DateRangePicker.tsx → src/components/common/DateRangePicker/DateRangePicker.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps } from "@/components/utils";
 import { Calendar as CalendarIcon } from "lucide-react";
 import {
   DateRangePicker as AriaDateRangePicker,
@@ -11,7 +12,6 @@ import { Dialog } from "../Dialog";
 import { FieldDescription, FieldError, FieldGroup, Label } from "../Field";
 import { Popover } from "../Popover";
 import { RangeCalendar } from "../RangeCalendar";
-import { composeTailwindRenderProps } from "../utils";
 
 export interface DateRangePickerProps<T extends DateValue>
   extends AriaDateRangePickerProps<T> {

src/components/Field/Field.tsx → src/components/common/Field/Field.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps, focusRing } from "@/components/utils";
 import {
   FieldError as AriaFieldError,
   Input as AriaInput,
@@ -15,7 +16,6 @@ import {
 } from "react-aria-components";
 import { twMerge } from "tailwind-merge";
 import { tv } from "tailwind-variants";
-import { composeTailwindRenderProps, focusRing } from "../utils";
 
 export function Label(props: LabelProps) {
   return (

src/components/GridList/GridList.tsx → src/components/common/GridList/GridList.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps, focusRing } from "@/components/utils";
 import {
   GridList as AriaGridList,
   GridListItem as AriaGridListItem,
@@ -7,7 +8,6 @@ import {
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
 import { Checkbox } from "../Checkbox";
-import { composeTailwindRenderProps, focusRing } from "../utils";
 
 export function GridList<T extends object>({
   children,

src/components/Link/Link.tsx → src/components/common/Link/Link.tsx

@@ -1,11 +1,11 @@
+import { focusRing } from "@/components/utils";
 import {
   Link as AriaLink,
   type LinkProps as AriaLinkProps,
   composeRenderProps,
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
 import { type ButtonProps, buttonStyles } from "../Button";
-import { focusRing } from "../utils";
 
 export interface LinkProps extends AriaLinkProps {
   variant?: "primary" | "secondary";

src/components/ListBox/ListBox.tsx → src/components/common/ListBox/ListBox.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps, focusRing } from "@/components/utils";
 import { Check } from "lucide-react";
 import {
   ListBox as AriaListBox,
@@ -11,7 +12,6 @@ import {
   composeRenderProps,
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
-import { composeTailwindRenderProps, focusRing } from "../utils";
 
 type ListBoxProps<T> = Omit<AriaListBoxProps<T>, "layout" | "orientation">;
 

src/components/Meter/Meter.tsx → src/components/common/Meter/Meter.tsx

@@ -1,10 +1,10 @@
+import { composeTailwindRenderProps } from "@/components/utils";
 import { AlertTriangle } from "lucide-react";
 import {
   Meter as AriaMeter,
   type MeterProps as AriaMeterProps,
 } from "react-aria-components";
 import { Label } from "../Field";
-import { composeTailwindRenderProps } from "../utils";
 
 export interface MeterProps extends AriaMeterProps {
   label?: string;

src/components/Nav/Nav.tsx → src/components/common/Nav/Nav.tsx

@@ -1,10 +1,10 @@
+import { focusRing } from "@/components/utils";
 import { useMatchRoute } from "@tanstack/react-router";
 import { ExternalLink, type LucideIcon } from "lucide-react";
 import { Header } from "react-aria-components";
 import { tv } from "tailwind-variants";
 import { Badge } from "../Badge";
 import { Link, type LinkProps } from "../Link";
-import { focusRing } from "../utils";
 
 interface NavItemProps extends LinkProps {
   icon?: LucideIcon;

src/components/NumberField/NumberField.tsx → src/components/common/NumberField/NumberField.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps } from "@/components/utils";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import {
   NumberField as AriaNumberField,
@@ -14,7 +15,6 @@ import {
   Label,
   fieldBorderStyles,
 } from "../Field";
-import { composeTailwindRenderProps } from "../utils";
 
 export interface NumberFieldProps extends AriaNumberFieldProps {
   label?: string;

src/components/ProgressBar/ProgressBar.tsx → src/components/common/ProgressBar/ProgressBar.tsx

@@ -1,10 +1,10 @@
+import { composeTailwindRenderProps } from "@/components/utils";
 import {
   ProgressBar as AriaProgressBar,
   type ProgressBarProps as AriaProgressBarProps,
 } from "react-aria-components";
 import { twMerge } from "tailwind-merge";
 import { Label } from "../Field";
-import { composeTailwindRenderProps } from "../utils";
 
 export interface ProgressBarProps extends AriaProgressBarProps {
   label: string;

src/components/RadioGroup/RadioGroup.tsx → src/components/common/RadioGroup/RadioGroup.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps, focusRing } from "@/components/utils";
 import type { ReactNode } from "react";
 import {
   Radio as AriaRadio,
@@ -8,7 +9,6 @@ import {
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
 import { FieldDescription, FieldError, Label } from "../Field";
-import { composeTailwindRenderProps, focusRing } from "../utils";
 
 export interface RadioGroupProps extends Omit<AriaRadioGroupProps, "children"> {
   label?: string;

src/components/RangeCalendar/RangeCalendar.tsx → src/components/common/RangeCalendar/RangeCalendar.tsx

@@ -1,3 +1,4 @@
+import { focusRing } from "@/components/utils";
 import {
   RangeCalendar as AriaRangeCalendar,
   type RangeCalendarProps as AriaRangeCalendarProps,
@@ -9,7 +10,6 @@ import {
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
 import { CalendarGridHeader, CalendarHeader } from "../Calendar";
-import { focusRing } from "../utils";
 
 export interface RangeCalendarProps<T extends DateValue>
   extends Omit<AriaRangeCalendarProps<T>, "visibleDuration"> {

src/components/RichText/RichText.tsx → src/components/common/RichText/RichText.tsx

@@ -1,10 +1,10 @@
+import { ReadingScore } from "@/components/quests/ReadingScore";
 import { BubbleMenu, EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import { Bold, Italic } from "lucide-react";
 import { useEffect } from "react";
 import { twMerge } from "tailwind-merge";
 import { tv } from "tailwind-variants";
-import { ReadingScore } from "../ReadingScore";
 import { ToggleButton } from "../ToggleButton";
 
 export interface RichTextProps {

src/components/SearchField/SearchField.tsx → src/components/common/SearchField/SearchField.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps } from "@/components/utils";
 import { CircleX, Search } from "lucide-react";
 import {
   SearchField as AriaSearchField,
@@ -12,7 +13,6 @@ import {
   Input,
   Label,
 } from "../Field";
-import { composeTailwindRenderProps } from "../utils";
 
 export interface SearchFieldProps extends AriaSearchFieldProps {
   label?: string;

src/components/Select/Select.tsx → src/components/common/Select/Select.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps, focusRing } from "@/components/utils";
 import { ChevronDown } from "lucide-react";
 import type React from "react";
 import {
@@ -17,7 +18,6 @@ import {
   type DropdownSectionProps,
 } from "../ListBox";
 import { Popover } from "../Popover";
-import { composeTailwindRenderProps, focusRing } from "../utils";
 
 const styles = tv({
   extend: focusRing,

src/components/Slider/Slider.tsx → src/components/common/Slider/Slider.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps, focusRing } from "@/components/utils";
 import {
   Slider as AriaSlider,
   type SliderProps as AriaSliderProps,
@@ -7,7 +8,6 @@ import {
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
 import { Label } from "../Field";
-import { composeTailwindRenderProps, focusRing } from "../utils";
 
 const trackStyles = tv({
   base: "rounded-full",

src/components/Switch/Switch.tsx → src/components/common/Switch/Switch.tsx

@@ -1,10 +1,10 @@
+import { composeTailwindRenderProps, focusRing } from "@/components/utils";
 import type React from "react";
 import {
   Switch as AriaSwitch,
   type SwitchProps as AriaSwitchProps,
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
-import { composeTailwindRenderProps, focusRing } from "../utils";
 
 export interface SwitchProps extends Omit<AriaSwitchProps, "children"> {
   children: React.ReactNode;

src/components/Table/Table.tsx → src/components/common/Table/Table.tsx

@@ -1,3 +1,4 @@
+import { composeTailwindRenderProps, focusRing } from "@/components/utils";
 import { ChevronUp } from "lucide-react";
 import {
   Cell as AriaCell,
@@ -22,7 +23,6 @@ import {
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
 import { Checkbox } from "../Checkbox";
-import { composeTailwindRenderProps, focusRing } from "../utils";
 
 export function Table(props: TableProps) {
   return (

src/components/Tabs/Tabs.tsx → src/components/common/Tabs/Tabs.tsx

@@ -1,3 +1,4 @@
+import { focusRing } from "@/components/utils";
 import {
   Tab as AriaTab,
   TabList as AriaTabList,
@@ -10,7 +11,6 @@ import {
   composeRenderProps,
 } from "react-aria-components";
 import { tv } from "tailwind-variants";
-import { focusRing } from "../utils";
 
 const tabsStyles = tv({
   base: "flex gap-4",