Skip to content

Commit

Permalink
fix: added dismissable layer and upgraded radix packages (#1595)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RohinBhargava
RohinBhargava authored Oct 10, 2024
1 parent 8a59d19 commit cd82e3e
Show file tree
Hide file tree
Showing 6 changed files with 593 additions and 227 deletions.
16 changes: 9 additions & 7 deletions packages/ui/app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,16 @@
"@inkeep/widgets": "^0.2.288",
"@next/third-parties": "14.2.9",
"@radix-ui/colors": "^3.0.0",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-collapsible": "^1.1.0",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-accordion": "^1.2.1",
"@radix-ui/react-collapsible": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dismissable-layer": "^1.1.1",
"@radix-ui/react-focus-scope": "^1.1.0",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.3",
"@radix-ui/react-visually-hidden": "^1.1.0",
"@segment/snippet": "^5.2.1",
"@shikijs/transformers": "^1.2.2",
Expand Down
132 changes: 78 additions & 54 deletions packages/ui/app/src/components/MaybeEnvironmentDropdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import type { APIV1Read } from "@fern-api/fdr-sdk/client/types";
import { FernButton, FernDropdown, FernInput } from "@fern-ui/components";
import { useBooleanState } from "@fern-ui/react-commons";
import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
import { FocusScope } from "@radix-ui/react-focus-scope";
import cn from "clsx";
import { useAtom } from "jotai";
import { ReactElement, useEffect, useState } from "react";
Expand Down Expand Up @@ -70,58 +72,70 @@ export function MaybeEnvironmentDropdown({
<>
{isEditingEnvironment.value ? (
<span key="url" className="inline-flex whitespace-nowrap max-sm:hidden font-mono">
<FernInput
autoFocus={isEditingEnvironment.value}
size={inputValue?.length ?? 0}
placeholder={inputValue}
value={inputValue}
onClick={(e) => {
<DismissableLayer
onEscapeKeyDown={(e) => {
setInputValue(initialState);
setPlaygroundEnvironment(initialState);
isEditingEnvironment.setFalse();
e.stopPropagation();
e.preventDefault();
}}
onBlur={(e) => {
if (isValidInput) {
if (playgroundEnvironment) {
setInputValue(playgroundEnvironment);
}
isEditingEnvironment.setFalse();
} else {
e.preventDefault();
e.stopPropagation();
setInputValue(initialState);
setPlaygroundEnvironment(initialState);
isEditingEnvironment.setFalse();
}
}}
onValueChange={(value) => {
if (
value === "" ||
value == null ||
parse(value).host == null ||
parse(value).protocol == null
) {
setInputValue(value);
} else {
setInputValue(value);
setPlaygroundEnvironment(value);
}
}}
onKeyDownCapture={(e) => {
if (e.key === "Enter" && isValidInput) {
if (playgroundEnvironment) {
setInputValue(playgroundEnvironment);
}
isEditingEnvironment.setFalse();
} else if (e.key === "Escape") {
e.preventDefault();
e.stopPropagation();
setInputValue(initialState);
setPlaygroundEnvironment(initialState);
isEditingEnvironment.setFalse();
}
}}
className={cn("p-0", isValidInput ? "" : "error", "h-auto", "flex flex-col")}
inputClassName={cn("px-1", "py-0.5", "h-auto", "font-mono", small ? "text-xs" : "text-sm")}
/>
>
<FocusScope trapped>
<FernInput
autoFocus={isEditingEnvironment.value}
size={inputValue?.length ?? 0}
placeholder={inputValue}
value={inputValue}
onClick={(e) => {
e.stopPropagation();
}}
onBlur={(e) => {
if (isValidInput) {
if (playgroundEnvironment) {
setInputValue(playgroundEnvironment);
}
isEditingEnvironment.setFalse();
} else {
e.preventDefault();
e.stopPropagation();
setInputValue(initialState);
setPlaygroundEnvironment(initialState);
isEditingEnvironment.setFalse();
}
}}
onValueChange={(value) => {
if (
value === "" ||
value == null ||
parse(value).host == null ||
parse(value).protocol == null
) {
setInputValue(value);
} else {
setInputValue(value);
setPlaygroundEnvironment(value);
}
}}
onKeyDownCapture={(e) => {
if (e.key === "Enter" && isValidInput) {
if (playgroundEnvironment) {
setInputValue(playgroundEnvironment);
}
isEditingEnvironment.setFalse();
}
}}
className={cn("p-0", isValidInput ? "" : "error", "h-auto", "flex flex-col")}
inputClassName={cn(
"px-1",
"py-0.5",
"h-auto",
"font-mono",
small ? "text-xs" : "text-sm",
)}
/>
</FocusScope>
</DismissableLayer>
</span>
) : (
<>
Expand Down Expand Up @@ -153,14 +167,21 @@ export function MaybeEnvironmentDropdown({
size={small ? "small" : "normal"}
variant="outlined"
mono={true}
onDoubleClick={
editable
onPointerMoveCapture={(e) => {
e.stopPropagation();
}}
onDoubleClickCapture={(e) => {
e.stopPropagation();
return editable
? () => {
setInitialState(inputValue);
isEditingEnvironment.setTrue();
}
: () => undefined
}
: undefined;
}}
onClickCapture={(e) => {
e.stopPropagation();
}}
/>
</FernDropdown>
) : (
Expand All @@ -173,6 +194,9 @@ export function MaybeEnvironmentDropdown({
small ? "text-xs" : "text-sm",
"hover:shadow-lg",
)}
onClickCapture={(e) => {
e.stopPropagation();
}}
onDoubleClick={
editable
? () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/app/src/playground/endpoint/PlaygroundEndpointSelectorContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export const PlaygroundEndpointSelectorContent = forwardRef<HTMLDivElement, Play
ref={ref}
>
<ul className="list-none p-3 flex flex-col gap-4 w-full h-fit">{renderedListItems}</ul>
<div className="!h-6"></div>
{/* <div className="!h-6"></div> */}
</FernScrollArea>
<BuiltWithFern className="border-t border-default py-4 px-6 bg-background" />
</div>
Expand Down
18 changes: 9 additions & 9 deletions packages/ui/components/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,16 @@
"@emotion/is-prop-valid": "^1.2.2",
"@fern-ui/react-commons": "workspace:*",
"@radix-ui/colors": "^3.0.0",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-collapsible": "^1.1.0",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-scroll-area": "^1.1.0",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.2",
"@radix-ui/react-collapsible": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-radio-group": "^1.2.1",
"@radix-ui/react-scroll-area": "^1.2.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-switch": "^1.1.1",
"@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"@radix-ui/react-tooltip": "^1.1.3",
"@shikijs/transformers": "^1.2.2",
"clsx": "^2.1.0",
"copyfiles": "^2.4.1",
Expand Down
1 change: 1 addition & 0 deletions packages/ui/components/src/FernScrollArea.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@

&[data-scrollbars="vertical"] > div {
max-width: 100%;
width: 100%;
}
}

Expand Down
Loading

0 comments on commit cd82e3e

Please sign in to comment.