feat: 🔋

README.md

@@ -76,7 +76,7 @@ yarn run test:coverage``` script
 
 - [Staging URL](https://x10.netlify.app/)
 
-- [Production URL](https://x10.dev)
+- [Production URL](https://x10.com)
 
 ## PR convention
 

src/__image-engine__/view.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { useSearchWidgetContext } from 'shared/components';
+
+export function ImageEngineView() {
+  const { searchQuery, searchImage } = useSearchWidgetContext();
+
+  return (
+    <div data-testid="imageEngineView">
+      This is Image Search engine {searchQuery} {searchImage}
+    </div>
+  );
+}

src/__text-engine__/view.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { useSearchWidgetContext } from 'shared/components';
+
+export function TextEngineView() {
+  const { searchQuery, searchImage } = useSearchWidgetContext();
+
+  return (
+    <div data-testid="textEngineView">
+      This is Text Search engine {searchQuery} {searchImage}
+    </div>
+  );
+}

src/__video-engine__/view.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { useSearchWidgetContext } from 'shared/components';
+
+export function VideoEngineView() {
+  const { searchQuery, searchImage } = useSearchWidgetContext();
+
+  return (
+    <div data-testid="videoEngineView">
+      This is Video Search engine {searchQuery} {searchImage}
+    </div>
+  );
+}

src/app.tsx

@@ -1,7 +1,38 @@
 import React from 'react';
 
+import { Helmet } from 'react-helmet';
+
 import { Router } from 'routes/index.route';
 
 export function App() {
-  return <Router />;
+  return (
+    <>
+      <Helmet>
+        <meta
+          name="description"
+          content="x10: The ultimate search engine leveraging AI, Chrome, Bing, and Yandex for unparalleled text, image, and video search results. Simplify your search across all needs with optimal outcomes."
+        />
+        <meta
+          name="keywords"
+          content="x10 search engine, AI search, comprehensive search, text search, image search, video search, Chrome, Bing, Yandex, optimal search results"
+        />
+        <meta property="og:title" content="x10: Comprehensive AI-Powered Search Engine" />
+        <meta
+          property="og:description"
+          content="Discover unparalleled search results for text, images, and videos across Chrome, Bing, and Yandex with x10. Simplify your search for all needs with optimal outcomes."
+        />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://www.x10.com" />
+        <meta property="og:image" content="https://www.yourwebsite.com/og-image.jpg" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content="x10: Comprehensive AI-Powered Search Engine" />
+        <meta
+          name="twitter:description"
+          content="Discover unparalleled search results for text, images, and videos across Chrome, Bing, and Yandex with x10. Simplify your search for all needs with optimal outcomes."
+        />
+      </Helmet>
+
+      <Router />
+    </>
+  );
 }

src/configs/index.ts

@@ -1,3 +1,2 @@
-export * from './seo';
 export * from './natives';
 export * from './report-web-vitals';

src/design-system/design-tokens.ts

@@ -1,10 +1,7 @@
-import * as assets from './assets';
-
 import { colors } from './colors';
 import { typography } from './typography';
 
 export const designTokens = {
   colors,
   typography,
-  assets,
 };

src/shared/components/search-widget/index.component.tsx

@@ -1,6 +1,8 @@
-import React, { useId } from 'react';
+import React, { useId, useRef } from 'react';
 import { ArrowRightIcon, ImageIcon } from '@radix-ui/react-icons';
 
+import { useComposeRefs } from 'shared/hooks';
+
 import { useSearchWidgetContext } from '.';
 import { useSearchWidgetPresenter } from './useSearchWidget.presenter';
 import { Form, ChatBox, ImageInput, ImageInputLabel, SubmitButton } from './index.styles';
@@ -14,11 +16,13 @@ interface SearchWidgetPropTypes extends Omit<PrimitiveFormPropTypes, 'onSubmit'>
 export const SearchWidget = React.forwardRef<SearchWidgetElement, SearchWidgetPropTypes>(
   function SearchWidget(props, forwardedRef) {
     const imgSearchId = useId();
-    const formSubmitHandler = useSearchWidgetPresenter(props.onSubmit);
+    const formRef = useRef<HTMLFormElement>(null);
+    const composedRefs = useComposeRefs<HTMLFormElement>(formRef, forwardedRef);
+    const formSubmitHandler = useSearchWidgetPresenter(formRef, props.onSubmit);
     const { searchQuery, handleImageChange, handleSearchQueryChange } = useSearchWidgetContext();
 
     return (
-      <Form {...props} ref={forwardedRef} onSubmit={formSubmitHandler}>
+      <Form {...props} ref={composedRefs} onSubmit={formSubmitHandler}>
         <ChatBox
           name="textSearch"
           autoCorrect="on"

src/shared/components/search-widget/useSearchWidget.presenter.ts

@@ -1,7 +1,10 @@
 import { useCallback } from 'react';
 
 type OnSubmit = <P>(formData: Record<string, FormDataEntryValue>) => Promise<P>;
-export function useSearchWidgetPresenter(onSubmit?: OnSubmit) {
+export function useSearchWidgetPresenter(
+  formRef: React.RefObject<HTMLFormElement>,
+  onSubmit?: OnSubmit
+) {
   return useCallback(
     async (event: React.FormEvent<HTMLFormElement>) => {
       event.preventDefault();
@@ -10,8 +13,8 @@ export function useSearchWidgetPresenter(onSubmit?: OnSubmit) {
       const formData = Object.fromEntries(form.entries());
 
       await onSubmit?.(formData);
-      event.currentTarget.reset();
+      formRef.current?.reset();
     },
-    [onSubmit]
+    [formRef, onSubmit]
   );
 }

src/shared/services/index.ts

@@ -1 +1 @@
-export {};
+export * from './http-services/index.service';

src/views/home/__test__/config.test.tsx

@@ -1,31 +1,31 @@
 import React from 'react';
 
-import { render, screen } from 'test';
+import { renderWithOptions, screen } from 'test';
 
 import { config } from '../config';
 
 describe('config object', () => {
   it('should have a textSearch property with a page view that renders correctly', () => {
     const Page = config.textSearch.page;
 
-    render(<Page />);
+    renderWithOptions(<Page />);
 
-    expect(screen.getByText('Text Search')).toBeInTheDocument();
+    expect(screen.getByTestId('textEngineView')).toBeInTheDocument();
   });
 
   it('should have an imageSearch property with a page view that renders correctly', () => {
     const Page = config.imageSearch.page;
 
-    render(<Page />);
+    renderWithOptions(<Page />);
 
-    expect(screen.getByText('Image Search')).toBeInTheDocument();
+    expect(screen.getByTestId('imageEngineView')).toBeInTheDocument();
   });
 
   it('should have a videoSearch property with a page view that renders correctly', () => {
     const Page = config.videoSearch.page;
 
-    render(<Page />);
+    renderWithOptions(<Page />);
 
-    expect(screen.getByText('Video Search')).toBeInTheDocument();
+    expect(screen.getByTestId('videoEngineView')).toBeInTheDocument();
   });
 });

src/views/home/config.tsx

@@ -1,11 +1,15 @@
+import { TextEngineView } from '__text-engine__/view';
+import { ImageEngineView } from '__image-engine__/view';
+import { VideoEngineView } from '__video-engine__/view';
+
 export const config = {
   textSearch: {
-    page: () => <h1>Text Search</h1>,
+    page: TextEngineView,
   },
   imageSearch: {
-    page: () => <h1>Image Search</h1>,
+    page: ImageEngineView,
   },
   videoSearch: {
-    page: () => <h1>Video Search</h1>,
+    page: VideoEngineView,
   },
 };

src/views/home/index.view.tsx

@@ -8,10 +8,5 @@ export function Home() {
 
   const Page = config[searchType].page;
 
-  return (
-    <>
-      Welcome Home
-      <Page />
-    </>
-  );
+  return <Page />;
 }