Skip to content

Commit

Permalink
Merge branch 'main' into makenna/fer-1462-dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@KenzoBenzo
KenzoBenzo authored May 9, 2024
2 parents 564059f + ea48616 commit 413929c
Show file tree
Hide file tree
Showing 18 changed files with 3,673 additions and 5,908 deletions.
2 changes: 1 addition & 1 deletion packages/ui/app/src/api-page/web-socket/WebSocket.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ const WebhookContent: FC<WebSocket.Props> = ({ websocket, isLastInApi, api, type
<span className="inline-flex items-center gap-2">
{"Handshake"}
<span className="inline-block rounded-full bg-tag-default p-1">
<Wifi className="t-muted size-[15px]" strokeWidth={1.5} />
<Wifi className="t-muted size-icon" strokeWidth={1.5} />
</span>
</span>
}
Expand Down
7 changes: 2 additions & 5 deletions packages/ui/app/src/api-page/web-socket/WebSocketMessages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,9 @@ interface WebSocketMessagesProps {

export const WebSocketMessages: FC<WebSocketMessagesProps> = ({ messages }) => {
return (
<Accordion.Root
type="multiple"
className="divide-default relative z-0 table h-full w-full table-fixed divide-y"
>
<Accordion.Root type="multiple" className="divide-default relative z-0 table size-full table-fixed divide-y">
{messages.length === 0 && (
<div className="absolute inset-0 flex h-full w-full items-center justify-center">
<div className="absolute inset-0 flex size-full items-center justify-center">
<div className="flex flex-col items-center space-y-4">
{/* <WifiOff className="t-muted" size={28} /> */}
<h4 className="m-0">No messages...</h4>
Expand Down
1 change: 1 addition & 0 deletions packages/ui/app/src/commons/__test__/CopyToClipboardButton.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ afterEach(cleanup);

describe("CopyToClipboardButton", () => {
it("renders correctly", async () => {
// eslint-disable-next-line deprecation/deprecation
const component = renderer.create(<CopyToClipboardButton testId="copy-btn" content={"test"} />);
const tree = component.toJSON() as renderer.ReactTestRendererJSON;
expect(tree).toMatchSnapshot();
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/app/src/components/FernSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { FC, forwardRef } from "react";
export const FernSelect: FC<Select.SelectProps> = () => (
<Select.Root>
<Select.Trigger
className="text-violet11 hover:bg-mauve3 data-[placeholder]:text-violet9 inline-flex h-[35px] items-center justify-center gap-[5px] rounded bg-white px-[15px] text-[13px] leading-none shadow-[0_2px_10px] shadow-black/10 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
className="text-violet11 hover:bg-mauve3 data-[placeholder]:text-violet9 inline-flex h-[35px] items-center justify-center gap-[5px] rounded bg-white px-icon text-[13px] leading-none shadow-[0_2px_10px] shadow-black/10 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
aria-label="Food"
>
<Select.Value placeholder="Select a fruit…" />
Expand All @@ -29,7 +29,7 @@ export const FernSelect: FC<Select.SelectProps> = () => (
<FernSelectItem value="pineapple">Pineapple</FernSelectItem>
</Select.Group>

<Select.Separator className="bg-violet6 m-[5px] h-[1px]" />
<Select.Separator className="bg-violet6 m-[5px] h-px" />

<Select.Group>
<Select.Label className="text-mauve11 px-[25px] text-xs leading-[25px]">
Expand All @@ -44,7 +44,7 @@ export const FernSelect: FC<Select.SelectProps> = () => (
<FernSelectItem value="leek">Leek</FernSelectItem>
</Select.Group>

<Select.Separator className="bg-violet6 m-[5px] h-[1px]" />
<Select.Separator className="bg-violet6 m-[5px] h-px" />

<Select.Group>
<Select.Label className="text-mauve11 px-[25px] text-xs leading-[25px]">Meat</Select.Label>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/app/src/components/FernSwitch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function FernSwitch(props: Switch.SwitchProps): ReactElement {
style={{ WebkitTapHighlightColor: "rgba(0, 0, 0, 0)", ...props.style }}
tabIndex={0}
>
<Switch.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-background shadow-[0_2px_2px] shadow-border-default transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
<Switch.Thumb className="block size-[21px] translate-x-0.5 rounded-full bg-background shadow-[0_2px_2px] shadow-border-default transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
</Switch.Root>
);
}
2 changes: 1 addition & 1 deletion packages/ui/app/src/custom-docs-page/FeedbackPopover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ export const FeedbackPopover = forwardRef<SelectionTextToolbarElement, Selection
>
<motion.div
layoutId="icon-container"
className="bg-tag-primary t-accent h-8 w-8 mx-auto rounded-md flex items-center justify-center"
className="bg-tag-primary t-accent size-8 mx-auto rounded-md flex items-center justify-center"
>
<Check />
</motion.div>
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/app/src/docs/ChangelogPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function ChangelogPage({ resolvedPath }: { resolvedPath: ResolvedPath.Cha
<section key={item.date} id={item.date} className="flex items-start">
<div className="prose relative mr-8 w-content-width flex-1 dark:prose-invert prose-h1:mt-[1.5em] first:prose-h1:mt-0 first:prose-h2:mt-0">
<div className="absolute -right-4 flex h-full w-[10px] items-start justify-center">
<div className="bg-accent z-10 h-2 w-2 rounded-full" />
<div className="bg-accent z-10 size-2 rounded-full" />
<div className="z-5 absolute h-full w-0.5 bg-border-default" />
</div>
<div className="pb-16">
Expand All @@ -46,7 +46,7 @@ export function ChangelogPage({ resolvedPath }: { resolvedPath: ResolvedPath.Cha
<MdxContent mdx={item.markdown} />
</div>
</div>
<div className="-mt-2 w-[18rem]">
<div className="-mt-2 w-72">
<span className="t-muted text-base">{Changelog.toShortDateString(item.date)}</span>
</div>
</section>
Expand Down
1 change: 1 addition & 0 deletions packages/ui/app/src/mdx/__test__/mdx.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { replaceBrokenBrTags, serializeMdxWithFrontmatter } from "../mdx";

async function renderMdxContent(content: string): Promise<renderer.ReactTestRendererJSON> {
const serializedContent = await serializeMdxWithFrontmatter(content, { development: false });
// eslint-disable-next-line deprecation/deprecation
const result = renderer.create(createElement(MdxContent, { mdx: serializedContent })).toJSON();

assert(result != null);
Expand Down
56 changes: 46 additions & 10 deletions packages/ui/app/src/mdx/base-components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,45 +116,81 @@ export const A: FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({ className, chil
!isValidElement(child)
? child
: isImgElement(child)
? cloneElement<ImgProps>(child, { disableZoom: true })
? cloneElement<ImgProps>(child, { noZoom: true })
: child.type === "img"
? createElement(Image, { ...child.props, disableZoom: true })
? createElement(Image, { ...child.props, noZoom: true })
: child,
)}
</FernLink>
);
};

export interface ImgProps extends ComponentProps<"img"> {
disableZoom?: boolean;
noZoom?: boolean;
}

function isImgElement(element: ReactElement): element is ReactElement<ImgProps> {
return element.type === Image;
}

export const Image: FC<ImgProps> = ({ className, src, height, width, disableZoom, ...rest }) => {
export const Image: FC<ImgProps> = ({ className, src, width: w, height: h, noZoom, style, ...rest }) => {
const { files } = useDocsContext();
// const mounted = useMounted();
// if (!mounted || disableZoom) {
// return <img {...rest} className={cn(className, "max-w-full")} src={src} alt={alt} />;
// }

const fernImageSrc = useMemo((): DocsV1Read.File_ | undefined => {
if (src == null) {
return undefined;
}

// if src starts with `file:`, assume it's a referenced file; fallback to src if not found
if (src.startsWith("file:")) {
const fileId = src.slice(5);
return files[fileId];
return files[fileId] ?? { type: "url", url: src };
}

return { type: "url", url: src };
}, [files, src]);

const width = stripUnits(w);
const height = stripUnits(h);

const fernImage = (
<FernImage
src={fernImageSrc}
width={width}
height={height}
style={{
width: w,
height: h,
...style,
}}
{...rest}
/>
);

if (noZoom) {
return fernImage;
}

return (
<Zoom zoomImg={{ src: fernImageSrc?.url }} classDialog="custom-backdrop">
<FernImage src={fernImageSrc} {...rest} />
{fernImage}
</Zoom>
);
};

// preserves pixel widths and heights, but strips units from other values
function stripUnits(str: string | number | undefined): number | `${number}` | undefined {
if (str == null || typeof str === "number") {
return str;
} else if (/^\d+$/.test(str)) {
// if str is a number, return it as a string
return str as `${number}`;
} else if (/^\d+(\.\d+)?(px)$/.test(str)) {
// if str is a number followed by "px", return the number as a string
return str.slice(0, -2) as `${number}`;
}

// TODO: handle rem

return undefined;
}
2 changes: 1 addition & 1 deletion packages/ui/app/src/sidebar/BuiltWithFern.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const BuiltWithFern: React.FC<BuiltWithFern.Props> = ({ className }) => {
}

return (
<div className="absolute bottom-0 left-[50%] z-50 my-8 flex w-fit translate-x-[-50%] justify-center">
<div className="absolute bottom-0 left-1/2 z-50 my-8 flex w-fit -translate-x-1/2 justify-center">
<FernTooltipProvider>
<FernTooltip content={BUILT_WITH_FERN_TOOLTIP_CONTENT} side="top">
<span>
Expand Down
75 changes: 44 additions & 31 deletions packages/ui/app/src/sidebar/SidebarApiSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,39 +28,21 @@ export const SidebarApiSection: React.FC<SidebarApiSectionProps> = ({
}) => {
const { selectedSlug } = useCollapseSidebar();

if (apiSection.isSidebarFlattened) {
return (
<li>
<FlattenedApiSection
apiSection={apiSection}
registerScrolledToPathListener={registerScrolledToPathListener}
depth={depth}
/>
</li>
);
}

return depth === 0 ? (
<li>
{apiSection.isSidebarFlattened ? (
<ul className="fern-sidebar-group">
{apiSection.items.map((item) =>
visitDiscriminatedUnion(item, "type")._visit({
apiSection: (item) => (
<SidebarApiSection
key={item.id}
apiSection={item}
registerScrolledToPathListener={registerScrolledToPathListener}
depth={depth}
/>
),
page: (item) => (
<SidebarApiSlugLink
key={joinUrlSlugs(...item.slug)}
item={item}
api={apiSection.api}
registerScrolledToPathListener={registerScrolledToPathListener}
depth={depth}
/>
),
_other: () => (
<FernErrorTag
component="SidebarApiSection"
error="Tried to render unknown api section."
/>
),
}),
)}
</ul>
) : apiSection.summaryPage != null ? (
{apiSection.summaryPage != null ? (
<SidebarSlugLink
className={cn({
"mt-6": depth === 0,
Expand Down Expand Up @@ -306,3 +288,34 @@ export const ExpandableSidebarApiSection: React.FC<ExpandableSidebarApiSectionPr
</SidebarSlugLink>
);
};

function FlattenedApiSection({ apiSection, registerScrolledToPathListener, depth }: SidebarApiSectionProps) {
return (
<ul className="fern-sidebar-group">
{apiSection.items.map((item) =>
visitDiscriminatedUnion(item, "type")._visit({
apiSection: (item) => (
<SidebarApiSection
key={item.id}
apiSection={item}
registerScrolledToPathListener={registerScrolledToPathListener}
depth={depth}
/>
),
page: (item) => (
<SidebarApiSlugLink
key={joinUrlSlugs(...item.slug)}
item={item}
api={apiSection.api}
registerScrolledToPathListener={registerScrolledToPathListener}
depth={depth}
/>
),
_other: () => (
<FernErrorTag component="SidebarApiSection" error="Tried to render unknown api section." />
),
}),
)}
</ul>
);
}
Loading

0 comments on commit 413929c

Please sign in to comment.