Block editor

app/(main)/(auth)/_components/SignInForm.tsx

@@ -1,9 +1,9 @@
-import { login } from '~/server/actions/auth';
-import { Input } from '~/components/ui/form/Input';
-import { SubmitButton } from '~/components/ui/form/SubmitButton';
-import Form from '~/components/ui/form/Form';
 import { getTranslations } from 'next-intl/server';
+import Form from '~/components/form/Form';
+import { Input } from '~/components/form/Input';
+import { SubmitButton } from '~/components/form/SubmitButton';
 import Link from '~/components/Link';
+import { login } from '~/server/actions/auth';
 
 export default async function SignInForm() {
   const t = await getTranslations('Auth');

app/(main)/(auth)/_components/SignUpForm.tsx

@@ -1,11 +1,11 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { useFormState } from 'react-dom';
+import Form from '~/components/form/Form';
+import { Input } from '~/components/form/Input';
+import { SubmitButton } from '~/components/form/SubmitButton';
 import { signup } from '~/server/actions/auth';
-import { Input } from '~/components/ui/form/Input';
-import { useTranslations } from 'next-intl';
-import { SubmitButton } from '~/components/ui/form/SubmitButton';
-import Form from '~/components/ui/form/Form';
 
 export default function SignUpForm() {
   const [formState, formAction] = useFormState(signup, {

app/(main)/(dashboard)/_components/CreateStudyForm.tsx

@@ -1,17 +1,17 @@
-import { createStudy } from '~/server/actions/study';
+import { Role } from '@prisma/client';
 import { getTranslations } from 'next-intl/server';
-import { SubmitButton } from '~/components/ui/form/SubmitButton';
-import { Input } from '~/components/ui/form/Input';
+import Form from '~/components/form/Form';
+import { Input } from '~/components/form/Input';
+import { SubmitButton } from '~/components/form/SubmitButton';
 import Section from '~/components/layout/Section';
 import {
   Select,
   SelectContent,
-  SelectValue,
-  SelectTrigger,
   SelectItem,
-} from '~/components/ui/select';
-import { Role } from '@prisma/client';
-import Form from '~/components/ui/form/Form';
+  SelectTrigger,
+  SelectValue,
+} from '~/components/select';
+import { createStudy } from '~/server/actions/study';
 
 export default async function CreateStudyForm() {
   const t = await getTranslations('Components.CreateStudyForm');

app/(main)/(dashboard)/_components/SignOutBtn.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import React from 'react';
-import { logout } from '~/server/actions/auth';
 import { useTranslations } from 'next-intl';
-import { SubmitButton } from '~/components/ui/form/SubmitButton';
+import { SubmitButton } from '~/components/form/SubmitButton';
+import { logout } from '~/server/actions/auth';
 
 export default function SignOutBtn() {
   const t = useTranslations('Auth.SignOut');

app/(main)/(dashboard)/_components/StudySwitcherClient.tsx

@@ -1,17 +1,17 @@
 'use client';
 
 import { type Study } from '@prisma/client';
-import { useParams, useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { useParams, useRouter } from 'next/navigation';
+import { route } from 'nextjs-routes';
 import { useEffect, useState } from 'react';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '~/components/ui/select';
-import { route } from 'nextjs-routes';
+} from '~/components/select';
 
 export default function StudySwitcherClient({ studies }: { studies: Study[] }) {
   const t = useTranslations('Components.StudySwitcher');

app/(main)/(dashboard)/layout.tsx

@@ -1,12 +1,12 @@
 import { SearchIcon } from 'lucide-react';
-import { Input } from '~/components/ui/form/Input';
 import Image from 'next/image';
-import StudySwitcher from './_components/StudySwitcher';
 import LanguageSwitcher from '~/app/_components/LocaleSwitcher';
-import SignOutBtn from './_components/SignOutBtn';
-import { requirePageAuth } from '~/lib/auth';
-import ResponsiveContainer from '~/components/layout/ResponsiveContainer';
 import ThemeSwitcher from '~/app/_components/ThemeSwitcher';
+import { Input } from '~/components/form/Input';
+import ResponsiveContainer from '~/components/layout/ResponsiveContainer';
+import { requirePageAuth } from '~/lib/auth';
+import SignOutBtn from './_components/SignOutBtn';
+import StudySwitcher from './_components/StudySwitcher';
 
 export default async function DashboardLayout({
   children,

app/(main)/(dashboard)/page.tsx

@@ -1,15 +1,15 @@
-import { getUserStudies } from '~/server/queries/studies';
 import { getTranslations } from 'next-intl/server';
-import Link from '~/components/Link';
-import UnorderedList from '~/components/typography/UnorderedList';
+import { route } from 'nextjs-routes';
+import { Button } from '~/components/Button';
 import Section from '~/components/layout/Section';
+import Link from '~/components/Link';
 import PageHeader from '~/components/typography/PageHeader';
+import Paragraph from '~/components/typography/Paragraph';
+import UnorderedList from '~/components/typography/UnorderedList';
+import { requirePageAuth } from '~/lib/auth';
 import { getInterviews } from '~/server/queries/interviews';
+import { getUserStudies } from '~/server/queries/studies';
 import CreateStudyForm from './_components/CreateStudyForm';
-import { requirePageAuth } from '~/lib/auth';
-import { Button } from '~/components/ui/Button';
-import Paragraph from '~/components/typography/Paragraph';
-import { route } from 'nextjs-routes';
 
 export default async function Dashboard() {
   await requirePageAuth();

app/_components/LocaleSwitcherSelect.tsx

@@ -1,14 +1,14 @@
 'use client';
 
+import { useTransition } from 'react';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '~/components/ui/select';
+} from '~/components/select';
 import { type Locale } from '~/lib/localisation/config';
-import { useTransition } from 'react';
 import { setUserLocale } from '~/lib/localisation/locale';
 import { getLocaleRecordsFromCodes } from '~/lib/localisation/utils';
 

app/_components/Providers.tsx

@@ -1,13 +1,13 @@
+import { MotionConfig } from 'framer-motion';
 import { type AbstractIntlMessages } from 'next-intl';
-import { type ReactNode } from 'react';
-import RadixDirectionProvider from './RadixDirectionProvider';
-import { TooltipProvider } from '~/components/ui/Tooltip';
-import { type Locale } from '~/lib/localisation/config';
-import IntlProvider from './IntlProvider';
 import { ThemeProvider } from 'next-themes';
-import { WizardProvider } from '~/lib/onboarding-wizard/Provider';
-import { MotionConfig } from 'framer-motion';
+import { type ReactNode } from 'react';
+import { TooltipProvider } from '~/components/Tooltip';
 import DialogProvider from '~/lib/dialogs/DialogProvider';
+import { WizardProvider } from '~/lib/onboarding-wizard/Provider';
+import { type Locale } from '~/schemas/protocol/i18n';
+import IntlProvider from './IntlProvider';
+import RadixDirectionProvider from './RadixDirectionProvider';
 
 export default function Providers({
   intlParams: { dir, messages, locale, now, timeZone },

components/ui/Button.stories.tsx → components/Button.stories.tsx

@@ -1,12 +1,12 @@
 import type { Meta } from '@storybook/react';
 import { fn } from '@storybook/test';
+import Heading from '~/components/typography/Heading';
 import {
   Button,
   type ButtonProps,
   type ButtonVariants,
   buttonVariants,
 } from './Button';
-import Heading from '../typography/Heading';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {

components/ui/Card.stories.tsx → components/Card.stories.tsx

@@ -1,9 +1,8 @@
 // Card.stories.tsx
 
-import React from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
+import Paragraph from '~/components/typography/Paragraph';
 import { Card, type CardProps } from './Card';
-import Paragraph from '../typography/Paragraph';
 
 // Meta configuration for Storybook
 const meta: Meta = {

components/ui/Card.tsx → components/Card.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { cn } from '~/lib/utils';
+import Divider from '~/components/layout/Divider';
+import Surface from '~/components/layout/Surface';
 import Heading from '~/components/typography/Heading';
-import Paragraph from '../typography/Paragraph';
-import Surface from '../layout/Surface';
-import Divider from '../layout/Divider';
+import Paragraph from '~/components/typography/Paragraph';
+import { cn } from '~/lib/utils';
 
 export type CardProps = {
   title: string;

components/DropdownMenu.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { Button } from './Button';
+import DropdownMenu from './DropdownMenu';
+
+const meta: Meta = {
+  title: 'UI/DropdownMenu',
+  component: DropdownMenu.Root,
+};
+
+export default meta;
+
+export const Default: StoryFn = () => (
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      <Button variant="text" color="primary">
+        Choose an Option
+      </Button>
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content>
+      <DropdownMenu.Label>Input Control</DropdownMenu.Label>
+      <DropdownMenu.RadioGroup>
+        <DropdownMenu.Item
+          textValue="checkboxGroup"
+          onSelect={() => {
+            alert('selected checkbox');
+          }}
+        >
+          Checkbox Group
+        </DropdownMenu.Item>
+        <DropdownMenu.Item
+          textValue="toggleButtonGroup"
+          onSelect={() => {
+            alert('selected toggle');
+          }}
+        >
+          Toggle Button Group
+        </DropdownMenu.Item>
+      </DropdownMenu.RadioGroup>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+);

components/DropdownMenu.tsx

@@ -0,0 +1,82 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { type PropsWithChildren } from 'react';
+import { cn } from '~/lib/utils';
+import Heading from './typography/Heading';
+
+const DropdownTrigger = ({ children }: PropsWithChildren) => (
+  <DropdownMenuPrimitive.Trigger asChild>
+    {children}
+  </DropdownMenuPrimitive.Trigger>
+);
+
+const DropdownMenuContent = ({
+  children,
+  side = 'bottom',
+  container,
+}: PropsWithChildren<{
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  container?: React.RefObject<HTMLDivElement>;
+}>) => {
+  // Use the portal prop if provided, otherwise fallback to the 'dialog-portal' element
+  const portalContainer = container?.current
+    ? container.current
+    : typeof window !== 'undefined'
+      ? document.getElementById('dialog-portal')
+      : null;
+
+  return (
+    <DropdownMenuPrimitive.Portal container={portalContainer}>
+      <DropdownMenuPrimitive.Content
+        side={side}
+        sideOffset={5}
+        className="z-50 rounded-small border bg-surface-0 p-2"
+      >
+        {children}
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+  );
+};
+
+const DropdownItem = ({
+  children,
+  textValue,
+  onSelect,
+  active,
+}: PropsWithChildren<{
+  textValue: string;
+  onSelect: () => void;
+  active?: boolean;
+}>) => (
+  <DropdownMenuPrimitive.Item
+    textValue={textValue}
+    onSelect={onSelect}
+    className={cn(
+      'rounded-small p-2 text-sm hover:cursor-pointer hover:bg-surface-1',
+      active && 'bg-surface-1',
+    )}
+  >
+    {children}
+  </DropdownMenuPrimitive.Item>
+);
+
+const DropdownLabel = ({ children }: PropsWithChildren) => (
+  <DropdownMenuPrimitive.Label className="p-2 text-sm text-muted-foreground">
+    <Heading variant="label">{children}</Heading>
+  </DropdownMenuPrimitive.Label>
+);
+
+const DropdownSeparator = () => (
+  <DropdownMenuPrimitive.Separator className="border-t border-surface-2" />
+);
+
+const DropdownMenu = {
+  Root: DropdownMenuPrimitive.Root,
+  RadioGroup: DropdownMenuPrimitive.RadioGroup,
+  Trigger: DropdownTrigger,
+  Content: DropdownMenuContent,
+  Label: DropdownLabel,
+  Item: DropdownItem,
+  Separator: DropdownSeparator,
+};
+
+export default DropdownMenu;

components/ui/Popover.tsx → components/Popover.tsx

@@ -1,20 +1,22 @@
-import { type PropsWithChildren } from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { type PropsWithChildren } from 'react';
+import { MotionSurface } from '~/components/layout/Surface';
+import Heading from '~/components/typography/Heading';
 import { cn } from '~/lib/utils';
 import CloseButton from './CloseButton';
-import Heading from '../typography/Heading';
-import { MotionSurface } from '../layout/Surface';
 
 const Popover = ({
   children,
   title,
   content,
   modal,
+  side,
   isOpen,
   onOpenChange,
 }: PropsWithChildren<{
   title?: string;
   content: string | React.ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
   modal?: boolean;
   isOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -50,6 +52,7 @@ const Popover = ({
           // floating-ui prop exposed in @radix-ui/react-popper patch
           // see https://floating-ui.com/docs/flip#fallbackaxissidedirection
           fallbackAxisSideDirection="start"
+          side={side}
         >
           <MotionSurface
             level={0}

components/Spotlight.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
 import * as motion from 'framer-motion/client';
-import PopoverBackdrop from './ui/PopoverBackdrop';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import PopoverBackdrop from '~/components/PopoverBackdrop';
 
 /**
  * Overlay that darkens the background and highlights a specific element.