From 70abcf5dccdb681e8d4c2fe34d48e5ab0211892b Mon Sep 17 00:00:00 2001
From: Aaron Shekey <aaron@aaronshekey.com>
Date: Wed, 6 Dec 2023 10:31:28 -0600
Subject: [PATCH 1/9] Add phosphor icons
---
package.json | 1 +
pnpm-lock.yaml | 14 ++++++++++++++
2 files changed, 15 insertions(+)
diff --git a/package.json b/package.json
index 1f15997a..2c2b92bd 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
"typecheck": "tsc --incremental --noEmit --skipLibCheck"
},
"dependencies": {
+ "@phosphor-icons/react": "^2.0.15",
"@radix-ui/react-dialog": "1.0.5",
"@radix-ui/react-dropdown-menu": "2.0.6",
"@radix-ui/react-icons": "1.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 72dad4df..e1a474a9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
.:
dependencies:
+ '@phosphor-icons/react':
+ specifier: ^2.0.15
+ version: 2.0.15(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-dialog':
specifier: 1.0.5
version: 1.0.5(@types/react-dom@18.2.17)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0)
@@ -3588,6 +3591,17 @@ packages:
nullthrows: 1.1.1
dev: true
+ /@phosphor-icons/react@2.0.15(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-PQKNcRrfERlC8gJGNz0su0i9xVmeubXSNxucPcbCLDd9u0cwJVTEyYK87muul/svf0UXFdL2Vl6bbeOhT1Mwow==}
+ engines: {node: '>=10'}
+ peerDependencies:
+ react: '>= 16.8'
+ react-dom: '>= 16.8'
+ dependencies:
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/@pkgjs/parseargs@0.11.0:
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'}
From ea48c28febe134e1a8946d39f41edd2059067c53 Mon Sep 17 00:00:00 2001
From: Aaron Shekey <aaron@aaronshekey.com>
Date: Wed, 6 Dec 2023 11:07:17 -0600
Subject: [PATCH 2/9] Bump Select
---
app/components/layout.tsx | 22 ++--
components/index.tsx | 3 +-
components/select/index.tsx | 202 ++++++++++++++++++++----------------
3 files changed, 120 insertions(+), 107 deletions(-)
diff --git a/app/components/layout.tsx b/app/components/layout.tsx
index 238937c7..29eddcf6 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";
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) {
<div className="ml-auto">
{/* TODO: this should probably have a title/tooltip instead that describes what it is since we ain't got a spot for a label */}
<span className="sr-only">Theme Switcher</span>
- <SelectTrigger className="w-min" hideIcon>
- <SelectIcon className="text-gray-600">
- <svg width="39" height="24" fill="currentColor">
- <path d="M28 9h10l-5 6-5-6Z" />
- <path d="M16.02 2.297a10.53 10.53 0 0 1 3.58 2.457A10.464 10.464 0 0 1 22.5 12c0 5.799-4.701 10.5-10.5 10.5-2.81 0-5.361-1.104-7.246-2.9A10.468 10.468 0 0 1 1.5 12a10.469 10.469 0 0 1 3.075-7.425A10.469 10.469 0 0 1 12 1.5c1.424 0 2.781.283 4.02.797ZM20.9 12a8.87 8.87 0 0 0-2.432-6.114L5.886 18.468A8.9 8.9 0 0 0 20.9 12Z" />
- </svg>
- </SelectIcon>
+ <SelectTrigger className="w-min">
+ <Sun className="w-6 h-6" />
</SelectTrigger>
</div>
<SelectContent>
- <SelectOption value={theme("system")}>System</SelectOption>
- <SelectOption value={theme("light")}>Light</SelectOption>
- <SelectOption value={theme("dark")}>Dark</SelectOption>
- <SelectOption value={theme("light-high-contrast")}>Light High Contrast</SelectOption>
- <SelectOption value={theme("dark-high-contrast")}>Dark High Contrast</SelectOption>
+ <SelectItem value={theme("system")}>System</SelectItem>
+ <SelectItem value={theme("light")}>Light</SelectItem>
+ <SelectItem value={theme("dark")}>Dark</SelectItem>
+ <SelectItem value={theme("light-high-contrast")}>Light High Contrast</SelectItem>
+ <SelectItem value={theme("dark-high-contrast")}>Dark High Contrast</SelectItem>
</SelectContent>
</Select>
</header>
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..2f78d18a 100644
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -1,125 +1,143 @@
-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 * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
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<typeof Trigger>,
- ComponentPropsWithoutRef<typeof Trigger> & { hideIcon?: boolean }
->(({ className, children, hideIcon = false, ...props }, ref) => (
- <Trigger
+ ElementRef<typeof SelectPrimitive.Trigger>,
+ ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+ <SelectPrimitive.Trigger
ref={ref}
className={cx(
- "flex h-10 w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 placeholder:text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-600/25 disabled:cursor-not-allowed disabled:opacity-50",
+ "flex h-10 w-full items-center justify-between rounded-md border border-gray-300 bg-background px-3 py-2 placeholder:text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-600/25 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className,
)}
{...props}
>
{children}
- {!hideIcon && (
- <Icon asChild>
- <CaretSortIcon className="h-4 w-4 opacity-50" />
- </Icon>
- )}
- </Trigger>
+ <SelectPrimitive.Icon asChild>
+ <ChevronDown className="h-4 w-4 opacity-50" />
+ </SelectPrimitive.Icon>
+ </SelectPrimitive.Trigger>
));
-SelectTrigger.displayName = Trigger.displayName;
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-const SelectContent = forwardRef<ElementRef<typeof Content>, ComponentPropsWithoutRef<typeof Content>>(
- ({ className, children, position = "popper", ...props }, ref) => (
- <Portal>
- <Content
- ref={ref}
- className={cx(
- "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-gray-900 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
- position === "popper" &&
- "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
- className,
- )}
- position={position}
- {...props}
- >
- <Viewport
- className={cx(
- "p-1",
- position === "popper" &&
- "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
- )}
- >
- {children}
- </Viewport>
- </Content>
- </Portal>
- ),
-);
-SelectContent.displayName = Content.displayName;
+const SelectScrollUpButton = forwardRef<
+ ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+ ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+ <SelectPrimitive.ScrollUpButton
+ ref={ref}
+ className={cx("flex cursor-default items-center justify-center py-1", className)}
+ {...props}
+ >
+ <ChevronUp className="h-4 w-4" />
+ </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-const SelectLabel = forwardRef<ElementRef<typeof Label>, ComponentPropsWithoutRef<typeof Label>>(
- ({ className, ...props }, ref) => (
- <Label ref={ref} className={cx("px-2 py-1.5 text-sm font-semibold", className)} {...props} />
- ),
-);
-SelectLabel.displayName = Label.displayName;
+const SelectScrollDownButton = forwardRef<
+ ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+ ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+ <SelectPrimitive.ScrollDownButton
+ ref={ref}
+ className={cx("flex cursor-default items-center justify-center py-1", className)}
+ {...props}
+ >
+ <ChevronDown className="h-4 w-4" />
+ </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-const SelectOption = forwardRef<ElementRef<typeof Item>, ComponentPropsWithoutRef<typeof Item>>(
- ({ className, children, ...props }, ref) => (
- <Item
+const SelectContent = forwardRef<
+ ElementRef<typeof SelectPrimitive.Content>,
+ ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+ <SelectPrimitive.Portal>
+ <SelectPrimitive.Content
ref={ref}
className={cx(
- "relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pl-2 pr-2 text-sm outline-none focus:bg-blue-500 focus:text-button data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+ "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-300 bg-card text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+ position === "popper" &&
+ "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className,
)}
+ position={position}
{...props}
>
- <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
- <ItemIndicator>
- <CheckIcon className="h-4 w-4" />
- </ItemIndicator>
- </span>
- <ItemText>{children}</ItemText>
- </Item>
- ),
-);
-SelectOption.displayName = Item.displayName;
+ <SelectScrollUpButton />
+ <SelectPrimitive.Viewport
+ className={cx(
+ "p-1",
+ position === "popper" &&
+ "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+ )}
+ >
+ {children}
+ </SelectPrimitive.Viewport>
+ <SelectScrollDownButton />
+ </SelectPrimitive.Content>
+ </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
-const SelectSeparator = forwardRef<ElementRef<typeof Separator>, ComponentPropsWithoutRef<typeof Separator>>(
- ({ className, ...props }, ref) => (
- <Separator ref={ref} className={cx("-mx-1 my-1 h-px bg-muted", className)} {...props} />
- ),
-);
-SelectSeparator.displayName = Separator.displayName;
+const SelectLabel = forwardRef<
+ ElementRef<typeof SelectPrimitive.Label>,
+ ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+ <SelectPrimitive.Label ref={ref} className={cx("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = forwardRef<
+ ElementRef<typeof SelectPrimitive.Item>,
+ ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+ <SelectPrimitive.Item
+ ref={ref}
+ className={cx(
+ "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-blue-600 focus:text-button data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+ className,
+ )}
+ {...props}
+ >
+ <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+ <SelectPrimitive.ItemIndicator>
+ <Check className="h-4 w-4" />
+ </SelectPrimitive.ItemIndicator>
+ </span>
+
+ <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+ </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = forwardRef<
+ ElementRef<typeof SelectPrimitive.Separator>,
+ ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+ <SelectPrimitive.Separator ref={ref} className={cx("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
export {
Select,
- SelectContent,
SelectGroup,
- SelectIcon,
+ SelectValue,
+ SelectTrigger,
+ SelectContent,
SelectLabel,
- SelectOption,
+ SelectItem,
SelectSeparator,
- SelectTrigger,
- SelectValue,
+ SelectScrollUpButton,
+ SelectScrollDownButton,
};
From 5c037924301985f5910a681a4623e6ad32e2a310 Mon Sep 17 00:00:00 2001
From: Aaron Shekey <aaron@aaronshekey.com>
Date: Wed, 6 Dec 2023 11:15:02 -0600
Subject: [PATCH 3/9] Select icon choices
---
app/components/layout.tsx | 2 +-
components/select/index.tsx | 10 +++++-----
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/app/components/layout.tsx b/app/components/layout.tsx
index 29eddcf6..b62f845a 100644
--- a/app/components/layout.tsx
+++ b/app/components/layout.tsx
@@ -61,7 +61,7 @@ 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 */}
<span className="sr-only">Theme Switcher</span>
<SelectTrigger className="w-min">
- <Sun className="w-6 h-6" />
+ <Sun className="w-6 h-6 mr-1" />
</SelectTrigger>
</div>
<SelectContent>
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 2f78d18a..6af12297 100644
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -1,5 +1,5 @@
+import { CaretDown, CaretUp, Check } from "@phosphor-icons/react";
import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
import type { ComponentPropsWithoutRef, ElementRef } from "react";
import { forwardRef } from "react";
import { cx } from "../cx";
@@ -24,7 +24,7 @@ const SelectTrigger = forwardRef<
>
{children}
<SelectPrimitive.Icon asChild>
- <ChevronDown className="h-4 w-4 opacity-50" />
+ <CaretDown className="h-4 w-4 opacity-50" weight="bold" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
));
@@ -39,7 +39,7 @@ const SelectScrollUpButton = forwardRef<
className={cx("flex cursor-default items-center justify-center py-1", className)}
{...props}
>
- <ChevronUp className="h-4 w-4" />
+ <CaretUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>
));
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -53,7 +53,7 @@ const SelectScrollDownButton = forwardRef<
className={cx("flex cursor-default items-center justify-center py-1", className)}
{...props}
>
- <ChevronDown className="h-4 w-4" />
+ <CaretDown className="h-4 w-4" weight="bold" />
</SelectPrimitive.ScrollDownButton>
));
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -112,7 +112,7 @@ const SelectItem = forwardRef<
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
- <Check className="h-4 w-4" />
+ <Check className="h-4 w-4" weight="bold" />
</SelectPrimitive.ItemIndicator>
</span>
From 96d53ab3827f316f836f8ab1d2ee32f2ed07e7f6 Mon Sep 17 00:00:00 2001
From: Aaron Shekey <aaron@aaronshekey.com>
Date: Wed, 6 Dec 2023 11:33:22 -0600
Subject: [PATCH 4/9] Code block icons
---
app/routes/components.code-block.tsx | 27 +++-----------
components/code-block/index.tsx | 54 +++++-----------------------
2 files changed, 12 insertions(+), 69 deletions(-)
diff --git a/app/routes/components.code-block.tsx b/app/routes/components.code-block.tsx
index 6637fd52..1bde84ac 100644
--- a/app/routes/components.code-block.tsx
+++ b/app/routes/components.code-block.tsx
@@ -8,6 +8,7 @@ import {
CodeBlockTitle,
} from "@/code-block";
import { code } from "@/code-block/code";
+import { FileText, Terminal } from "@phosphor-icons/react";
import type { MetaFunction } from "@vercel/remix";
import { Example } from "~/components/example";
@@ -35,7 +36,7 @@ export default function Page() {
<Example className="mt-4">
<CodeBlock>
<CodeBlockHeader>
- <FileIcon />
+ <FileText className="w-5 h-5" weight="fill" />
<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
@@ -125,7 +126,7 @@ export default function Page() {
<Example className="mt-4">
<CodeBlock>
<CodeBlockHeader>
- <CommandLineIcon />
+ <Terminal className="w-5 h-5" weight="fill" />
<CodeBlockTitle>Command Line</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
@@ -168,7 +169,7 @@ export default function Page() {
<Example className="mt-4">
<CodeBlock>
<CodeBlockHeader>
- <FileIcon />
+ <FileText className="w-5 h-5" weight="fill" />
<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
@@ -332,23 +333,3 @@ export default function Page() {
</div>
);
}
-
-const CommandLineIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
- <path
- fillRule="evenodd"
- d="M3.25 3A2.25 2.25 0 001 5.25v9.5A2.25 2.25 0 003.25 17h13.5A2.25 2.25 0 0019 14.75v-9.5A2.25 2.25 0 0016.75 3H3.25zm.943 8.752a.75.75 0 01.055-1.06L6.128 9l-1.88-1.693a.75.75 0 111.004-1.114l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.06-.055zM9.75 10.25a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z"
- clipRule="evenodd"
- />
- </svg>
-);
-
-const FileIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
- <path
- fillRule="evenodd"
- d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"
- clipRule="evenodd"
- />
- </svg>
-);
diff --git a/components/code-block/index.tsx b/components/code-block/index.tsx
index 79fa59c8..09537fb9 100644
--- a/components/code-block/index.tsx
+++ b/components/code-block/index.tsx
@@ -17,6 +17,7 @@ import {
import "prismjs/components/prism-bash.js";
import "prismjs/components/prism-jsx.js";
import "prismjs/components/prism-tsx.js";
+import { CaretDown, Check, Copy } from "@phosphor-icons/react";
import { useCopyToClipboard } from "@uidotdev/usehooks";
import assert from "tiny-invariant";
import { cx } from "../cx";
@@ -236,10 +237,10 @@ const CodeBlockCopyButton = forwardRef<HTMLButtonElement, CodeBlockCopyButtonPro
{copied ? (
<>
Copied
- <CheckIcon />
+ <Check className="w-4 h-4" weight="bold" />
</>
) : (
- <CopyIcon />
+ <Copy className="w-5 h-5 -ml-px" />
)}
</button>
);
@@ -270,7 +271,7 @@ const CodeBlockExpanderButton = forwardRef<HTMLButtonElement, CodeBlockExpanderB
aria-controls={codeId}
aria-expanded={isCodeExpanded}
className={cx(
- "bg-gray-050 flex w-full items-center justify-center border-t border-gray-300 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100",
+ "bg-gray-050 flex w-full items-center justify-center border-t border-gray-300 px-4 py-2 gap-0.5 font-sans text-gray-700 hover:bg-gray-100",
className,
)}
ref={ref}
@@ -281,7 +282,10 @@ const CodeBlockExpanderButton = forwardRef<HTMLButtonElement, CodeBlockExpanderB
}}
>
{isCodeExpanded ? "Show less" : "Show more"}{" "}
- <ExpandIcon className={cx(isCodeExpanded && "rotate-180", "transition-all duration-150")} />
+ <CaretDown
+ className={cx("w-4 h-4", isCodeExpanded && "rotate-180", "transition-all duration-150")}
+ weight="bold"
+ />
</button>
);
},
@@ -297,45 +301,3 @@ export {
CodeBlockHeader,
CodeBlockTitle,
};
-
-const ExpandIcon = ({ className, style }: WithStyleProps) => (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 20 20"
- fill="currentColor"
- className={cx("relative top-px h-5 w-5 transition-transform", className)}
- style={style}
- >
- <path d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" />
- </svg>
-);
-
-const CopyIcon = ({ className, style }: WithStyleProps) => (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- fill="none"
- viewBox="0 0 20 20"
- strokeWidth="{1.5}"
- stroke="currentColor"
- className={cx("h-5 w-5", className)}
- style={style}
- >
- <path
- strokeLinecap="round"
- strokeLinejoin="round"
- d="M7.719 7.719v-3.5a1.5 1.5 0 0 1 1.5-1.5h5.562a1.5 1.5 0 0 1 1.5 1.5V12a1.5 1.5 0 0 1-1.5 1.5H11.5m-7.281 4.781H10a1.5 1.5 0 0 0 1.5-1.5V9.22a1.5 1.5 0 0 0-1.5-1.5H4.219a1.5 1.5 0 0 0-1.5 1.5v7.562a1.5 1.5 0 0 0 1.5 1.5Z"
- />
- </svg>
-);
-
-const CheckIcon = ({ className, style }: WithStyleProps) => (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 20 20"
- fill="currentColor"
- className={cx("h-5 w-5", className)}
- style={style}
- >
- <path d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" />
- </svg>
-);
From c4d129a457e5261dbb1b76af004c0ee0cc4e006d Mon Sep 17 00:00:00 2001
From: Aaron Shekey <aaron@aaronshekey.com>
Date: Wed, 6 Dec 2023 11:35:14 -0600
Subject: [PATCH 5/9] Remove the opacity from the select caret
---
components/select/index.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 6af12297..3d5eb509 100644
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -24,7 +24,7 @@ const SelectTrigger = forwardRef<
>
{children}
<SelectPrimitive.Icon asChild>
- <CaretDown className="h-4 w-4 opacity-50" weight="bold" />
+ <CaretDown className="h-4 w-4" weight="bold" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
));
From 668db0cbbdd32b5821623f3a0ec07ae8875c9ec8 Mon Sep 17 00:00:00 2001
From: Aaron Shekey <aaron@aaronshekey.com>
Date: Wed, 6 Dec 2023 13:41:04 -0600
Subject: [PATCH 6/9] Be way more specific on Icon import
---
app/components/layout.tsx | 2 +-
app/routes/components.code-block.tsx | 3 ++-
components/code-block/index.tsx | 4 +++-
components/select/index.tsx | 4 +++-
4 files changed, 9 insertions(+), 4 deletions(-)
diff --git a/app/components/layout.tsx b/app/components/layout.tsx
index b62f845a..43580849 100644
--- a/app/components/layout.tsx
+++ b/app/components/layout.tsx
@@ -2,7 +2,7 @@ import { cx } from "@/cx";
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";
+import { Sun } from "@phosphor-icons/react/Sun";
import { Link } from "@remix-run/react";
import { PropsWithChildren, useState } from "react";
import { NavLink } from "./nav-link";
diff --git a/app/routes/components.code-block.tsx b/app/routes/components.code-block.tsx
index 1bde84ac..6bef0990 100644
--- a/app/routes/components.code-block.tsx
+++ b/app/routes/components.code-block.tsx
@@ -8,7 +8,8 @@ import {
CodeBlockTitle,
} from "@/code-block";
import { code } from "@/code-block/code";
-import { FileText, Terminal } from "@phosphor-icons/react";
+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";
diff --git a/components/code-block/index.tsx b/components/code-block/index.tsx
index 09537fb9..d5cc433e 100644
--- a/components/code-block/index.tsx
+++ b/components/code-block/index.tsx
@@ -17,7 +17,9 @@ import {
import "prismjs/components/prism-bash.js";
import "prismjs/components/prism-jsx.js";
import "prismjs/components/prism-tsx.js";
-import { CaretDown, Check, Copy } from "@phosphor-icons/react";
+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";
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 3d5eb509..63cddc61 100644
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -1,4 +1,6 @@
-import { CaretDown, CaretUp, Check } from "@phosphor-icons/react";
+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";
From 883f3a8780793372d7e25c6e4b643dcb80c7c2dd Mon Sep 17 00:00:00 2001
From: Aaron Shekey <aaron@aaronshekey.com>
Date: Wed, 6 Dec 2023 14:11:05 -0600
Subject: [PATCH 7/9] Remove @radix-ui/react-icons
---
components/drawer/index.tsx | 5 ++---
package.json | 1 -
pnpm-lock.yaml | 11 -----------
3 files changed, 2 insertions(+), 15 deletions(-)
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<ElementRef<typeof DrawerPrimitive.Content>, Dra
<DrawerPrimitive.Content ref={ref} className={cx(drawerVariants({ side }), className)} {...props}>
{children}
<DrawerPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
- {/* TODO(cody): replaceme w/ real icon */}
- <Cross2Icon className="h-4 w-4" />
+ <X className="h-6 w-6" />
<span className="sr-only">Close</span>
</DrawerPrimitive.Close>
</DrawerPrimitive.Content>
diff --git a/package.json b/package.json
index 2c2b92bd..0d65bfa2 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,6 @@
"@phosphor-icons/react": "^2.0.15",
"@radix-ui/react-dialog": "1.0.5",
"@radix-ui/react-dropdown-menu": "2.0.6",
- "@radix-ui/react-icons": "1.3.0",
"@radix-ui/react-popover": "1.0.7",
"@radix-ui/react-select": "2.0.0",
"@radix-ui/react-slot": "1.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e1a474a9..bf26bdc2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,9 +17,6 @@ importers:
'@radix-ui/react-dropdown-menu':
specifier: 2.0.6
version: 2.0.6(@types/react-dom@18.2.17)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0)
- '@radix-ui/react-icons':
- specifier: 1.3.0
- version: 1.3.0(react@18.2.0)
'@radix-ui/react-popover':
specifier: 1.0.7
version: 1.0.7(@types/react-dom@18.2.17)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0)
@@ -3875,14 +3872,6 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
- /@radix-ui/react-icons@1.3.0(react@18.2.0):
- resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
- peerDependencies:
- react: ^16.x || ^17.x || ^18.x
- dependencies:
- react: 18.2.0
- dev: false
-
/@radix-ui/react-id@1.0.1(@types/react@18.2.42)(react@18.2.0):
resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
peerDependencies:
From db9070a851b4ddeec21a0bd28e45aa8e4892bd0c Mon Sep 17 00:00:00 2001
From: Aaron Shekey <aaron@aaronshekey.com>
Date: Wed, 6 Dec 2023 14:19:13 -0600
Subject: [PATCH 8/9] Remove lucide-react
---
components/back-to-top-button/index.tsx | 4 ++--
components/dropdown-menu/index.tsx | 10 ++++++----
components/select/index.tsx | 2 +-
package.json | 1 -
pnpm-lock.yaml | 11 -----------
5 files changed, 9 insertions(+), 19 deletions(-)
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}
>
<span className="sr-only">Scroll back to top</span>
- <ArrowUpToLine />
+ <ArrowLineUp className="w-6 h-6" />
</TooltipTrigger>
<TooltipContent collisionPadding={8}>
<p>Scroll back to top</p>
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}
- <ChevronRight className="ml-auto h-4 w-4" />
+ <CaretRight className="ml-auto h-4 w-4" weight="bold" />
</DropdownMenuPrimitive.SubTrigger>
));
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
@@ -103,7 +105,7 @@ const DropdownMenuCheckboxItem = forwardRef<
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
- <Check className="h-4 w-4" />
+ <Check className="h-4 w-4" weight="bold" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
@@ -125,7 +127,7 @@ const DropdownMenuRadioItem = forwardRef<
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
- <Circle className="h-2 w-2 fill-current" />
+ <Circle className="h-2 w-2" weight="fill" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 63cddc61..865dc20f 100644
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -41,7 +41,7 @@ const SelectScrollUpButton = forwardRef<
className={cx("flex cursor-default items-center justify-center py-1", className)}
{...props}
>
- <CaretUp className="h-4 w-4" />
+ <CaretUp className="h-4 w-4" weight="bold" />
</SelectPrimitive.ScrollUpButton>
));
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
diff --git a/package.json b/package.json
index 0d65bfa2..ac3f00da 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,6 @@
"class-variance-authority": "0.7.0",
"clsx": "2.0.0",
"isbot": "3.7.1",
- "lucide-react": "0.294.0",
"prismjs": "1.29.0",
"tailwind-merge": "2.1.0",
"tiny-invariant": "1.3.1"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bf26bdc2..f15e07c3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,9 +56,6 @@ importers:
isbot:
specifier: 3.7.1
version: 3.7.1
- lucide-react:
- specifier: 0.294.0
- version: 0.294.0(react@18.2.0)
prismjs:
specifier: 1.29.0
version: 1.29.0
@@ -10787,14 +10784,6 @@ packages:
engines: {node: '>=12'}
dev: true
- /lucide-react@0.294.0(react@18.2.0):
- resolution: {integrity: sha512-V7o0/VECSGbLHn3/1O67FUgBwWB+hmzshrgDVRJQhMh8uj5D3HBuIvhuAmQTtlupILSplwIZg5FTc4tTKMA2SA==}
- peerDependencies:
- react: ^16.5.1 || ^17.0.0 || ^18.0.0
- dependencies:
- react: 18.2.0
- dev: false
-
/lz-string@1.5.0:
resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
hasBin: true
From 1b8f97edc305719948bc6673509000df017ef48b Mon Sep 17 00:00:00 2001
From: Aaron Shekey <aaron@aaronshekey.com>
Date: Wed, 6 Dec 2023 14:24:49 -0600
Subject: [PATCH 9/9] Update code-block.stories.tsx
---
components/code-block/code-block.stories.tsx | 28 ++++----------------
1 file changed, 5 insertions(+), 23 deletions(-)
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<typeof meta>;
-const CommandLineIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
- <path
- fillRule="evenodd"
- d="M3.25 3A2.25 2.25 0 001 5.25v9.5A2.25 2.25 0 003.25 17h13.5A2.25 2.25 0 0019 14.75v-9.5A2.25 2.25 0 0016.75 3H3.25zm.943 8.752a.75.75 0 01.055-1.06L6.128 9l-1.88-1.693a.75.75 0 111.004-1.114l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.06-.055zM9.75 10.25a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z"
- clipRule="evenodd"
- />
- </svg>
-);
-
-const FileIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
- <path
- fillRule="evenodd"
- d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"
- clipRule="evenodd"
- />
- </svg>
-);
-
export const WithHeaderFileExpanding: Story = {
render: () => (
<div className="mx-auto max-w-screen-md">
<CodeBlock>
<CodeBlockHeader className="flex items-center gap-1">
- <FileIcon />
+ <FileText className="w-5 h-5" weight="fill" />
<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
@@ -108,7 +90,7 @@ export const WithHeaderCommandLine: Story = {
<div className="mx-auto max-w-screen-md">
<CodeBlock>
<CodeBlockHeader className="flex items-center gap-1">
- <CommandLineIcon />
+ <Terminal className="w-5 h-5" weight="fill" />
<CodeBlockTitle>Command Line</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>
@@ -127,7 +109,7 @@ export const WithHeaderFile: Story = {
<div className="mx-auto max-w-screen-md">
<CodeBlock>
<CodeBlockHeader className="flex items-center gap-1">
- <FileIcon />
+ <FileText className="w-5 h-5" weight="fill" />
<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
</CodeBlockHeader>
<CodeBlockBody>