From a5e81a70800928ebed5bea678fbedcd7e0d7a965 Mon Sep 17 00:00:00 2001
From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com>
Date: Fri, 20 Sep 2024 01:13:26 -0300
Subject: [PATCH] refactor: blocks page and search (#540)
---
.gitignore | 3 +-
packages/app-explorer/package.json | 2 +-
.../src/app/block/[id]/layout.tsx | 6 +-
.../src/systems/Block/components/Block.tsx | 2 +-
.../systems/Block/components/BlockHeader.tsx | 11 +-
.../Block/components/BlockScreenSimple.tsx | 9 +-
.../Core/components/Search/SearchForm.tsx | 6 +-
.../Search/SearchInput/SearchInput.tsx | 178 +
.../Search/SearchInput/constants.ts | 1 +
.../components/Search/SearchInput/index.ts | 1 +
.../components/Search/SearchInput/styles.ts | 28 +
.../SearchResultDropdown.tsx} | 241 +-
.../Search/SearchResultDropdown/index.ts | 1 +
.../Search/SearchResultDropdown/styles.ts | 12 +
.../Search/SearchResultDropdown/types.ts | 11 +
.../Core/components/Search/SearchWidget.tsx | 16 +-
.../hooks/usePropagateInputMouseClick.ts | 51 +
.../systems/Core/components/Search/styles.ts | 18 +-
.../systems/Core/components/TopNav/TopNav.tsx | 6 +-
.../src/systems/Home/components/Hero/Hero.tsx | 2 +-
.../src/graphql/generated/sdk-provider.ts | 2446 +++++++++++-
packages/graphql/src/graphql/generated/sdk.ts | 3519 ++++++++++++++++-
.../src/graphql/queries/sdk/block.graphql | 1 +
packages/ui/.storybook/main.ts | 7 +
packages/ui/__mocks__/next/link.tsx | 11 +
packages/ui/__mocks__/next/navigation.tsx | 18 +
packages/ui/package.json | 30 +-
pnpm-lock.yaml | 1724 ++++----
28 files changed, 6949 insertions(+), 1412 deletions(-)
create mode 100644 packages/app-explorer/src/systems/Core/components/Search/SearchInput/SearchInput.tsx
create mode 100644 packages/app-explorer/src/systems/Core/components/Search/SearchInput/constants.ts
create mode 100644 packages/app-explorer/src/systems/Core/components/Search/SearchInput/index.ts
create mode 100644 packages/app-explorer/src/systems/Core/components/Search/SearchInput/styles.ts
rename packages/app-explorer/src/systems/Core/components/Search/{SearchInput.tsx => SearchResultDropdown/SearchResultDropdown.tsx} (52%)
create mode 100644 packages/app-explorer/src/systems/Core/components/Search/SearchResultDropdown/index.ts
create mode 100644 packages/app-explorer/src/systems/Core/components/Search/SearchResultDropdown/styles.ts
create mode 100644 packages/app-explorer/src/systems/Core/components/Search/SearchResultDropdown/types.ts
create mode 100644 packages/app-explorer/src/systems/Core/components/Search/hooks/usePropagateInputMouseClick.ts
create mode 100644 packages/ui/__mocks__/next/link.tsx
create mode 100644 packages/ui/__mocks__/next/navigation.tsx
diff --git a/.gitignore b/.gitignore
index 0d2f80dcb..1bd15fda5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -89,4 +89,5 @@ act-actions
# playwright report
**/**/playwright-report/*
-**/**/playwright-html/*
\ No newline at end of file
+**/**/playwright-html/*
+*storybook.log
\ No newline at end of file
diff --git a/packages/app-explorer/package.json b/packages/app-explorer/package.json
index 77b2636d3..142cbe77f 100644
--- a/packages/app-explorer/package.json
+++ b/packages/app-explorer/package.json
@@ -73,7 +73,7 @@
"autoprefixer": "10.4.17",
"postcss": "8.4.35",
"postcss-import": "16.0.1",
- "storybook": "^8.0.8",
+ "storybook": "8.3.0",
"storybook-addon-theme": "workspace:*",
"tailwindcss": "3.4.4",
"tailwindcss-animate": "1.0.7",
diff --git a/packages/app-explorer/src/app/block/[id]/layout.tsx b/packages/app-explorer/src/app/block/[id]/layout.tsx
index 41d0b3540..d3e7c73f3 100644
--- a/packages/app-explorer/src/app/block/[id]/layout.tsx
+++ b/packages/app-explorer/src/app/block/[id]/layout.tsx
@@ -1,17 +1,19 @@
import type { ReactNode } from 'react';
+import { getBlock } from '~/systems/Block/actions/get-block';
import { BlockHeader } from '~/systems/Block/components/BlockHeader';
import type { BlockRouteParams } from '~/systems/Block/types';
-export default function BlockLayout({
+export default async function BlockLayout({
children,
params: { id },
}: {
children: ReactNode;
params: BlockRouteParams;
}) {
+ const { producer } = await getBlock({ id });
return (
<>
-
+
{children}
);
diff --git a/packages/app-explorer/src/systems/Block/components/Block.tsx b/packages/app-explorer/src/systems/Block/components/Block.tsx
index 13beb593b..787eb99b8 100644
--- a/packages/app-explorer/src/systems/Block/components/Block.tsx
+++ b/packages/app-explorer/src/systems/Block/components/Block.tsx
@@ -24,7 +24,7 @@ export async function Block({
}: BlockScreenProps) {
return (
<>
-
+
{viewMode === ViewModes.Simple && (
();
@@ -23,10 +23,11 @@ export function BlockHeader({
isLoading={isLoading}
loadingEl={}
regularEl={
- isValidAddress(id) ? (
-
+ //
+ isValidAddress(producer) ? (
+
) : (
- <>#{id}
+ <>#{producer}
)
}
/>
diff --git a/packages/app-explorer/src/systems/Block/components/BlockScreenSimple.tsx b/packages/app-explorer/src/systems/Block/components/BlockScreenSimple.tsx
index db4c7abe8..d5c62fbb1 100644
--- a/packages/app-explorer/src/systems/Block/components/BlockScreenSimple.tsx
+++ b/packages/app-explorer/src/systems/Block/components/BlockScreenSimple.tsx
@@ -31,7 +31,14 @@ export function BlockScreenSimple({
}: BlockScreenSimpleProps) {
return (
-
+
+
+ }
+ regularEl={block?.height}
+ />
+
);
diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchInput/SearchInput.tsx b/packages/app-explorer/src/systems/Core/components/Search/SearchInput/SearchInput.tsx
new file mode 100644
index 000000000..163c47d9f
--- /dev/null
+++ b/packages/app-explorer/src/systems/Core/components/Search/SearchInput/SearchInput.tsx
@@ -0,0 +1,178 @@
+'use client';
+
+import type { GQLSearchResult, Maybe } from '@fuel-explorer/graphql';
+import type { BaseProps, InputProps } from '@fuels/ui';
+import { Focus, Icon, IconButton, Input, Tooltip, VStack } from '@fuels/ui';
+import { IconCheck, IconSearch, IconX } from '@tabler/icons-react';
+import type { KeyboardEvent } from 'react';
+import { useContext, useRef, useState } from 'react';
+import { useFormStatus } from 'react-dom';
+
+import { cx } from '../../../utils/cx';
+
+import { SearchResultDropdown } from '../SearchResultDropdown';
+import { SearchContext } from '../SearchWidget';
+import { usePropagateInputMouseClick } from '../hooks/usePropagateInputMouseClick';
+import { DEFAULT_SEARCH_INPUT_WIDTH } from './constants';
+import { styles } from './styles';
+
+type SearchInputProps = BaseProps & {
+ onSubmit?: (value: string) => void;
+ searchResult?: Maybe;
+ alwaysDisplayActionButtons?: boolean;
+ variablePosition?: boolean;
+};
+
+export function SearchInput({
+ value: initialValue = '',
+ className,
+ autoFocus,
+ placeholder = 'Search here...',
+ searchResult,
+ variablePosition,
+ ...props
+}: SearchInputProps) {
+ const classes = styles();
+ const [value, setValue] = useState(initialValue as string);
+ const [isFocused, setIsFocused] = useState(false);
+ const [isOpen, setIsOpen] = useState(false);
+ const [hasSubmitted, setHasSubmitted] = useState(false);
+ const inputRef = useRef(null);
+ const containerRef = useRef(null);
+ const { pending } = useFormStatus();
+ const { dropdownRef } = useContext(SearchContext);
+ const openDropdown = hasSubmitted
+ ? !pending
+ : isOpen && !pending && !!searchResult;
+
+ usePropagateInputMouseClick({
+ containerRef,
+ inputRef,
+ enabled: openDropdown,
+ });
+
+ function handleChange(event: React.ChangeEvent) {
+ setValue(event.target.value);
+ }
+
+ function handleSubmit() {
+ setIsOpen(true);
+ setHasSubmitted(true);
+ }
+
+ function close() {
+ setIsOpen(false);
+ setHasSubmitted(false);
+ }
+
+ function handleClear() {
+ setValue('');
+ close();
+ }
+
+ function handleFocus() {
+ setIsFocused(true);
+ }
+
+ function handleBlur() {
+ setIsFocused(false);
+ }
+
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ (e.target as HTMLFormElement).form?.dispatchEvent(
+ new Event('submit', { cancelable: true, bubbles: true }),
+ );
+ handleSubmit();
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+