diff --git a/app/components/layout.tsx b/app/components/layout.tsx index 238937c7..43580849 100644 --- a/app/components/layout.tsx +++ b/app/components/layout.tsx @@ -1,7 +1,8 @@ import { cx } from "@/cx"; -import { Select, SelectContent, SelectIcon, SelectOption, SelectTrigger } from "@/select"; +import { Select, SelectContent, SelectItem, SelectTrigger } from "@/select"; import { isTheme, theme, useTheme } from "@/theme-provider"; import { WithStyleProps } from "@/types/with-style-props"; +import { Sun } from "@phosphor-icons/react/Sun"; import { Link } from "@remix-run/react"; import { PropsWithChildren, useState } from "react"; import { NavLink } from "./nav-link"; @@ -59,21 +60,16 @@ export function Layout({ children, className, style }: Props) {
{/* TODO: this should probably have a title/tooltip instead that describes what it is since we ain't got a spot for a label */} Theme Switcher - - - - - - - + +
- System - Light - Dark - Light High Contrast - Dark High Contrast + System + Light + Dark + Light High Contrast + Dark High Contrast diff --git a/app/routes/components.code-block.tsx b/app/routes/components.code-block.tsx index 6637fd52..6bef0990 100644 --- a/app/routes/components.code-block.tsx +++ b/app/routes/components.code-block.tsx @@ -8,6 +8,8 @@ import { CodeBlockTitle, } from "@/code-block"; import { code } from "@/code-block/code"; +import { FileText } from "@phosphor-icons/react/FileText"; +import { Terminal } from "@phosphor-icons/react/Terminal"; import type { MetaFunction } from "@vercel/remix"; import { Example } from "~/components/example"; @@ -35,7 +37,7 @@ export default function Page() { - + ngrok-example.js @@ -125,7 +127,7 @@ export default function Page() { - + Command Line @@ -168,7 +170,7 @@ export default function Page() { - + ngrok-example.js @@ -332,23 +334,3 @@ export default function Page() { ); } - -const CommandLineIcon = () => ( - - - -); - -const FileIcon = () => ( - - - -); diff --git a/components/back-to-top-button/index.tsx b/components/back-to-top-button/index.tsx index c70a80a8..86e53182 100644 --- a/components/back-to-top-button/index.tsx +++ b/components/back-to-top-button/index.tsx @@ -1,5 +1,5 @@ +import { ArrowLineUp } from "@phosphor-icons/react/ArrowLineUp"; import { useWindowScroll } from "@uidotdev/usehooks"; -import { ArrowUpToLine } from "lucide-react"; import { useEffect, useRef, type CSSProperties } from "react"; import { cx } from "../cx"; import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion"; @@ -42,7 +42,7 @@ export const BackToTopButton = ({ className, showThresholdPx = 200, style }: Pro tabIndex={-1} > Scroll back to top - +

Scroll back to top

diff --git a/components/code-block/code-block.stories.tsx b/components/code-block/code-block.stories.tsx index 503de760..097d33a8 100644 --- a/components/code-block/code-block.stories.tsx +++ b/components/code-block/code-block.stories.tsx @@ -1,3 +1,5 @@ +import { FileText } from "@phosphor-icons/react/FileText"; +import { Terminal } from "@phosphor-icons/react/Terminal"; import type { Meta, StoryObj } from "@storybook/react"; import { CodeBlock, @@ -20,32 +22,12 @@ export default meta; type Story = StoryObj; -const CommandLineIcon = () => ( - - - -); - -const FileIcon = () => ( - - - -); - export const WithHeaderFileExpanding: Story = { render: () => (
- + ngrok-example.js @@ -108,7 +90,7 @@ export const WithHeaderCommandLine: Story = {
- + Command Line @@ -127,7 +109,7 @@ export const WithHeaderFile: Story = {
- + ngrok-example.js diff --git a/components/code-block/index.tsx b/components/code-block/index.tsx index 79fa59c8..d5cc433e 100644 --- a/components/code-block/index.tsx +++ b/components/code-block/index.tsx @@ -17,6 +17,9 @@ import { import "prismjs/components/prism-bash.js"; import "prismjs/components/prism-jsx.js"; import "prismjs/components/prism-tsx.js"; +import { CaretDown } from "@phosphor-icons/react/CaretDown"; +import { Check } from "@phosphor-icons/react/Check"; +import { Copy } from "@phosphor-icons/react/Copy"; import { useCopyToClipboard } from "@uidotdev/usehooks"; import assert from "tiny-invariant"; import { cx } from "../cx"; @@ -236,10 +239,10 @@ const CodeBlockCopyButton = forwardRef Copied - + ) : ( - + )} ); @@ -270,7 +273,7 @@ const CodeBlockExpanderButton = forwardRef {isCodeExpanded ? "Show less" : "Show more"}{" "} - + ); }, @@ -297,45 +303,3 @@ export { CodeBlockHeader, CodeBlockTitle, }; - -const ExpandIcon = ({ className, style }: WithStyleProps) => ( - - - -); - -const CopyIcon = ({ className, style }: WithStyleProps) => ( - - - -); - -const CheckIcon = ({ className, style }: WithStyleProps) => ( - - - -); diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 639abbb1..59287e86 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -1,5 +1,5 @@ +import { X } from "@phosphor-icons/react/X"; import * as DrawerPrimitive from "@radix-ui/react-dialog"; -import { Cross2Icon } from "@radix-ui/react-icons"; import { cva, type VariantProps } from "class-variance-authority"; import { ComponentPropsWithoutRef, ElementRef, forwardRef, HTMLAttributes } from "react"; import { cx } from "../cx"; @@ -56,8 +56,7 @@ const DrawerContent = forwardRef, Dra {children} - {/* TODO(cody): replaceme w/ real icon */} - + Close diff --git a/components/dropdown-menu/index.tsx b/components/dropdown-menu/index.tsx index 564823ea..8f4a852f 100644 --- a/components/dropdown-menu/index.tsx +++ b/components/dropdown-menu/index.tsx @@ -1,5 +1,7 @@ +import { CaretRight } from "@phosphor-icons/react/CaretRight"; +import { Check } from "@phosphor-icons/react/Check"; +import { Circle } from "@phosphor-icons/react/Circle"; import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; -import { Check, ChevronRight, Circle } from "lucide-react"; import type { ComponentPropsWithoutRef, ElementRef } from "react"; import { forwardRef } from "react"; import { cx } from "../cx"; @@ -32,7 +34,7 @@ const DropdownMenuSubTrigger = forwardRef< {...props} > {children} - + )); DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName; @@ -103,7 +105,7 @@ const DropdownMenuCheckboxItem = forwardRef< > - + {children} @@ -125,7 +127,7 @@ const DropdownMenuRadioItem = forwardRef< > - + {children} diff --git a/components/index.tsx b/components/index.tsx index 332fcbb6..994499bb 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -31,9 +31,8 @@ export { Select, SelectContent, SelectGroup, - SelectIcon, SelectLabel, - SelectOption, + SelectItem, SelectSeparator, SelectTrigger, SelectValue, diff --git a/components/select/index.tsx b/components/select/index.tsx index 9735d796..865dc20f 100644 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -1,125 +1,145 @@ -import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"; -import { - Content, - Group, - Icon, - Item, - ItemIndicator, - ItemText, - Label, - Portal, - Root, - Separator, - Trigger, - Value, - Viewport, -} from "@radix-ui/react-select"; +import { CaretDown } from "@phosphor-icons/react/CaretDown"; +import { CaretUp } from "@phosphor-icons/react/CaretUp"; +import { Check } from "@phosphor-icons/react/Check"; +import * as SelectPrimitive from "@radix-ui/react-select"; import type { ComponentPropsWithoutRef, ElementRef } from "react"; import { forwardRef } from "react"; import { cx } from "../cx"; -const Select = Root; +const Select = SelectPrimitive.Root; -const SelectGroup = Group; +const SelectGroup = SelectPrimitive.Group; -const SelectValue = Value; - -const SelectIcon = Icon; +const SelectValue = SelectPrimitive.Value; const SelectTrigger = forwardRef< - ElementRef, - ComponentPropsWithoutRef & { hideIcon?: boolean } ->(({ className, children, hideIcon = false, ...props }, ref) => ( - , + ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + span]:line-clamp-1", className, )} {...props} > {children} - {!hideIcon && ( - - - - )} - + + + + )); -SelectTrigger.displayName = Trigger.displayName; +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; -const SelectContent = forwardRef, ComponentPropsWithoutRef>( - ({ className, children, position = "popper", ...props }, ref) => ( - - - - {children} - - - - ), -); -SelectContent.displayName = Content.displayName; +const SelectScrollUpButton = forwardRef< + ElementRef, + ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)); +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName; -const SelectLabel = forwardRef, ComponentPropsWithoutRef>( - ({ className, ...props }, ref) => ( -