HOV-105 | [DO NOT MERGE] Hover Landing Page - V2

docs/docusaurus.config.js

@@ -23,7 +23,7 @@ const config = {
   // to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: "en",
-    locales: ["en"],
+    locales: ["en"]
   },
 
   presets: [
@@ -32,21 +32,13 @@ const config = {
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
-          sidebarPath: require.resolve("./sidebars.js"),
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
+          sidebarPath: require.resolve("./sidebars.js")
         },
         blog: {
-          showReadingTime: true,
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl: "https://github.com/antstackio/hover-design/issues/new",
-        },
-        theme: {
-          customCss: require.resolve("./src/css/custom.css"),
-        },
-      }),
-    ],
+          showReadingTime: true
+        }
+      })
+    ]
   ],
 
   themeConfig:
@@ -56,28 +48,28 @@ const config = {
         title: "Hover Design",
         logo: {
           alt: "My Site Logo",
-          src: "img/logo.svg",
+          src: "img/logo.svg"
         },
         items: [
           {
             type: "doc",
             docId: "intro",
             position: "left",
-            label: "Documentation",
+            label: "Documentation"
           },
           {
             type: "doc",
             docId: "wiki/home",
             position: "left",
             sidebarId: "wiki",
-            label: "Wiki",
+            label: "Wiki"
           },
           {
             href: "https://github.com/antstackio/hover-design",
             label: "GitHub",
-            position: "right",
-          },
-        ],
+            position: "right"
+          }
+        ]
       },
       footer: {
         style: "dark",
@@ -87,33 +79,33 @@ const config = {
             items: [
               {
                 label: "Tutorial",
-                to: "/docs/intro",
+                to: "/docs/intro"
               },
               {
                 label: "Wiki",
-                to: "/docs/wiki/home",
-              },
-            ],
+                to: "/docs/wiki/home"
+              }
+            ]
           },
 
           {
             title: "More",
             items: [
               {
                 label: "GitHub",
-                href: "https://github.com/antstackio/hover-design",
-              },
-            ],
-          },
-        ],
+                href: "https://github.com/antstackio/hover-design"
+              }
+            ]
+          }
+        ]
         // copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
       },
       prism: {
         theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
-      },
+        darkTheme: darkCodeTheme
+      }
     }),
-  plugins: ["docusaurus-plugin-vanilla-extract"],
+  plugins: ["docusaurus-plugin-vanilla-extract"]
 };
 
 module.exports = config;

docs/src/pages/index.tsx

@@ -1,53 +1,9 @@
 import React from "react";
-import clsx from "clsx";
-import Layout from "@theme/Layout";
-import Link from "@docusaurus/Link";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import styles from "./index.module.css";
-import HomepageFeatures from "@site/src/components/HomepageFeatures";
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttonFlex}>
-          <div className={styles.buttons}>
-            <Link
-              className="button button--secondary button--lg"
-              to="/docs/intro"
-            >
-              Quick Start
-            </Link>
-          </div>
-          <div className={styles.buttons}>
-            <a
-              className="button button--secondary button--lg"
-              href="https://github.com/antstackio/hover-design"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Github
-            </a>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}
 
-export default function Home(): JSX.Element {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <Layout
-      title={`${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
-    >
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
-    </Layout>
-  );
-}
+type Props = {};
+
+const HomePage = (props: Props) => {
+  return <div>HomePage</div>;
+};
+
+export default HomePage;

packages/lib/src/components/HoverProvider/HoverProvider.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+import { IHoverProviderProps, IHoverThemeContext } from "./HoverProvider.types";
+
+export const HoverContext = createContext<
+  IHoverThemeContext<unknown | undefined>
+>({ theme: undefined });
+
+export const HoverProvider = <T,>({
+  value,
+  children
+}: IHoverProviderProps<T>) => {
+  return (
+    <HoverContext.Provider value={value}>{children}</HoverContext.Provider>
+  );
+};
+
+export const useHoverTheme = <T,>(): IHoverThemeContext<T> => {
+  const { theme } = useContext(HoverContext);
+  return { theme } as IHoverThemeContext<T>;
+};

packages/lib/src/components/HoverProvider/HoverProvider.types.ts

@@ -0,0 +1,8 @@
+export interface IHoverThemeContext<T> {
+  theme: T | undefined;
+}
+
+export interface IHoverProviderProps<T> {
+  value: IHoverThemeContext<T>;
+  children: React.ReactNode;
+}

packages/lib/src/components/HoverProvider/index.ts

@@ -0,0 +1,2 @@
+export * from "./HoverProvider";
+export * from "./HoverProvider.types";

packages/lib/src/index.ts

@@ -15,6 +15,7 @@ export * from "./components/Dialog";
 export * from "./components/Divider";
 export * from "./components/Flex";
 export * from "./components/Grid";
+export * from "./components/HoverProvider";
 export * from "./components/Icon";
 export * from "./components/Input";
 export * from "./components/Label";