Progression 60

.gitignore

@@ -1,3 +1,5 @@
+.env
+
 # Logs
 logs
 *.log

@/components/plate-ui/avatar.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '../../lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

@/components/plate-ui/blockquote-element.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import React from 'react';
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+const BlockquoteElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <PlateElement
+      asChild
+      ref={ref}
+      className={cn('my-1 border-l-2 pl-6 italic', className)}
+      {...props}
+    >
+      <blockquote>{children}</blockquote>
+    </PlateElement>
+  );
+});
+BlockquoteElement.displayName = 'BlockquoteElement';
+
+export { BlockquoteElement };

@/components/plate-ui/button.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        inlineLink: 'text-base text-primary underline underline-offset-4',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        xs: 'h-8 rounded-md px-3',
+        sm: 'h-9 rounded-md px-3',
+        sms: 'h-9 w-9 rounded-md px-0',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+        none: '',
+      },
+      isMenu: {
+        true: 'h-auto w-full cursor-pointer justify-start',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, isMenu, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ isMenu, variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

@/components/plate-ui/caption.tsx

@@ -0,0 +1,52 @@
+import React, { ComponentProps } from 'react';
+import {
+  Caption as CaptionPrimitive,
+  CaptionTextarea as CaptionTextareaPrimitive,
+} from '@udecode/plate-caption';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const captionVariants = cva('max-w-full', {
+  variants: {
+    align: {
+      left: 'mr-auto',
+      center: 'mx-auto',
+      right: 'ml-auto',
+    },
+  },
+  defaultVariants: {
+    align: 'center',
+  },
+});
+
+const Caption = React.forwardRef<
+  React.ElementRef<typeof CaptionPrimitive>,
+  ComponentProps<typeof CaptionPrimitive> & VariantProps<typeof captionVariants>
+>(({ className, align, ...props }, ref) => (
+  <CaptionPrimitive
+    ref={ref}
+    className={cn(captionVariants({ align }), className)}
+    {...props}
+  />
+));
+Caption.displayName = 'Caption';
+
+const CaptionTextarea = React.forwardRef<
+  React.ElementRef<typeof CaptionTextareaPrimitive>,
+  ComponentProps<typeof CaptionTextareaPrimitive>
+>(({ className, ...props }, ref) => (
+  <CaptionTextareaPrimitive
+    ref={ref}
+    className={cn(
+      'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',
+      'focus:outline-none focus:[&::placeholder]:opacity-0',
+      'text-center print:placeholder:text-transparent',
+      className
+    )}
+    {...props}
+  />
+));
+CaptionTextarea.displayName = 'CaptionTextarea';
+
+export { Caption, CaptionTextarea };

@/components/plate-ui/checkbox.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <Icons.check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

@/components/plate-ui/code-block-combobox.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  CODE_BLOCK_LANGUAGES,
+  CODE_BLOCK_LANGUAGES_POPULAR,
+  useCodeBlockCombobox,
+  useCodeBlockComboboxState,
+} from '@udecode/plate-code-block';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+import { Button } from './button';
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+const languages: { value: string; label: string }[] = [
+  { value: 'text', label: 'Plain Text' },
+  ...Object.entries({
+    ...CODE_BLOCK_LANGUAGES_POPULAR,
+    ...CODE_BLOCK_LANGUAGES,
+  }).map(([key, val]) => ({
+    value: key,
+    label: val as string,
+  })),
+];
+
+export function CodeBlockCombobox() {
+  const state = useCodeBlockComboboxState();
+  const { commandItemProps } = useCodeBlockCombobox(state);
+
+  const [open, setOpen] = useState(false);
+
+  if (state.readOnly) return null;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          role="combobox"
+          aria-expanded={open}
+          className="h-5 justify-between px-1 text-xs"
+          size="xs"
+        >
+          {state.value
+            ? languages.find((language) => language.value === state.value)
+                ?.label
+            : 'Plain Text'}
+          <Icons.chevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search language..." />
+          <CommandEmpty>No language found.</CommandEmpty>
+
+          <CommandList>
+            {languages.map((language) => (
+              <CommandItem
+                key={language.value}
+                value={language.value}
+                className="cursor-pointer"
+                onSelect={(_value) => {
+                  commandItemProps.onSelect(_value);
+                  setOpen(false);
+                }}
+              >
+                <Icons.check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    state.value === language.value ? 'opacity-100' : 'opacity-0'
+                  )}
+                />
+                {language.label}
+              </CommandItem>
+            ))}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}