relock fern-platform (#838)

fern-api · May 9, 2024 · c6cf8fb · c6cf8fb
1 parent 8103671
commit c6cf8fb
Show file tree

Hide file tree

Showing 12 changed files with 3,525 additions and 5,866 deletions.
diff --git a/packages/ui/app/src/api-page/web-socket/WebSocket.tsx b/packages/ui/app/src/api-page/web-socket/WebSocket.tsx
@@ -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>
                                 }

diff --git a/packages/ui/app/src/api-page/web-socket/WebSocketMessages.tsx b/packages/ui/app/src/api-page/web-socket/WebSocketMessages.tsx
@@ -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>

diff --git a/packages/ui/app/src/commons/__test__/CopyToClipboardButton.test.tsx b/packages/ui/app/src/commons/__test__/CopyToClipboardButton.test.tsx
@@ -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();

diff --git a/packages/ui/app/src/components/FernSelect.tsx b/packages/ui/app/src/components/FernSelect.tsx
@@ -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…" />
@@ -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]">
@@ -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>

diff --git a/packages/ui/app/src/components/FernSwitch.tsx b/packages/ui/app/src/components/FernSwitch.tsx
@@ -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>
     );
 }
diff --git a/packages/ui/app/src/custom-docs-page/FeedbackPopover.tsx b/packages/ui/app/src/custom-docs-page/FeedbackPopover.tsx
@@ -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>

diff --git a/packages/ui/app/src/docs/ChangelogPage.tsx b/packages/ui/app/src/docs/ChangelogPage.tsx
@@ -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">
@@ -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>

diff --git a/packages/ui/app/src/mdx/__test__/mdx.test.ts b/packages/ui/app/src/mdx/__test__/mdx.test.ts
@@ -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);

diff --git a/packages/ui/app/src/sidebar/BuiltWithFern.tsx b/packages/ui/app/src/sidebar/BuiltWithFern.tsx
@@ -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>