From b16cee85a4e82165ee91c19abba8989cfa210c3f Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Mon, 16 Dec 2024 21:31:14 +0800 Subject: [PATCH] update @theguild/components to use Nextra 4 (#1762) Co-authored-by: Piotr Monwid-Olechnowicz Co-authored-by: github-actions[bot] --- .../@theguild_components-1762-dependencies.md | 9 + .../@theguild_components-1824-dependencies.md | 6 + .../@theguild_components-1844-dependencies.md | 6 + .changeset/brave-sloths-film.md | 5 + .changeset/eight-dots-compare.md | 5 + .changeset/odd-penguins-cry.md | 5 + .changeset/tasty-deers-pretend.md | 5 + .changeset/tidy-hotels-compare.md | 5 + .changeset/unlucky-dolphins-arrive.md | 5 + .eslintrc.cjs | 11 +- .github/workflows/ci.yml | 6 +- .github/workflows/cloudflare-workers.yaml | 2 +- .storybook/main.ts | 2 +- .storybook/preview.tsx | 3 + package.json | 12 +- packages/components/package.json | 50 ++--- packages/components/src/cn.ts | 10 +- packages/components/src/compile.ts | 4 - packages/components/src/components/anchor.tsx | 7 +- .../src/components/company-menu.tsx | 53 ----- .../components/src/components/contact-us.tsx | 44 ++++ .../src/components/cookies-consent.tsx | 35 ++- .../src/components/footer.stories.ts | 45 ---- packages/components/src/components/footer.tsx | 147 ------------ .../get-your-api-game-right-section.tsx | 18 +- packages/components/src/components/giscus.tsx | 15 ++ .../components/guild-navbar-logo.stories.tsx | 25 --- .../src/components/guild-navbar-logo.tsx | 74 ------ .../components/src/components/heading.tsx | 2 + .../components/src/components/hero-video.tsx | 15 +- .../index.stories.tsx} | 34 ++- .../index.tsx} | 55 ++--- .../hive-navigation/graphql-conf-card.tsx | 2 +- ...vigation.stories.tsx => index.stories.tsx} | 59 +++-- .../src/components/hive-navigation/index.tsx | 175 ++++++--------- .../hive-navigation/navigation-menu.tsx | 2 +- .../components/src/components/icons/index.ts | 1 - packages/components/src/components/index.ts | 17 +- .../src/components/legacy-package-cmd.tsx | 1 + .../src/components/marketplace-list.tsx | 2 + .../src/components/marketplace-search.tsx | 2 + .../src/components/mdx-components.tsx | 43 ---- .../product-card/product-card.stories.tsx | 2 +- .../components/products/envelop.stories.tsx | 12 +- .../src/components/products/tools.stories.tsx | 25 --- .../components/src/components/schema-type.tsx | 2 +- packages/components/src/components/stud.tsx | 3 +- .../src/components/theme-switcher.tsx | 10 +- packages/components/src/constants.ts | 8 + packages/components/src/define-config.tsx | 111 --------- packages/components/src/env.d.ts | 6 - .../components/src/helpers/render-slot.tsx | 22 -- packages/components/src/helpers/utils.ts | 5 - packages/components/src/index.ts | 29 +-- packages/components/src/logos/guild.svg | 2 - packages/components/src/logos/index.tsx | 30 ++- packages/components/src/next-types.ts | 27 +++ packages/components/src/next.config.ts | 108 --------- packages/components/src/products.tsx | 73 +++--- packages/components/src/server/index.ts | 18 ++ .../components/src/server/mdx-components.tsx | 51 +++++ packages/components/src/server/next.config.ts | 151 +++++++++++++ packages/components/src/{ => server}/npm.ts | 0 packages/components/src/server/pages.ts | 1 + .../components/src/server/theme-layout.tsx | 205 +++++++++++++++++ .../src/{ => server}/underscore-redirects.ts | 0 packages/components/src/types/components.ts | 8 - packages/components/style.css | 64 +++--- packages/components/tsconfig.json | 4 +- packages/components/tsup.config.ts | 108 +++++---- packages/editor/package.json | 4 +- .../editor/src/editor/use-schema-services.ts | 2 +- packages/remark-mermaid/package.json | 13 +- packages/remark-mermaid/src/index.test.ts | 58 +++-- packages/remark-mermaid/tsconfig.json | 2 +- .../__snapshots__/plugin.test.ts.snap | 13 +- .../remark-npm2yarn/__tests__/plugin.test.ts | 4 +- packages/remark-npm2yarn/package.json | 4 +- packages/remark-npm2yarn/tsconfig.json | 2 +- patches/esbuild-plugin-svgr.patch | 20 ++ patches/tsup@8.2.1.patch | 4 +- pnpm-lock.yaml | 211 +++++++++++------- turbo.json | 9 +- website/{src/pages => app}/_meta.ts | 14 +- website/app/docs/_meta.ts | 5 + website/app/docs/import/page.mdx | 5 + website/{src => app/docs/import}/reused.mdx | 0 .../mermaid.mdx => app/docs/mermaid/page.mdx} | 2 +- .../docs/npm2yarn/page.mdx} | 0 website/app/docs/page.mdx | 126 +++++++++++ website/app/docs/remote/page.mdx | 25 +++ .../video.mdx => app/docs/video/page.mdx} | 9 +- website/{public/fav.ico => app/favicon.ico} | Bin website/app/layout.tsx | 65 ++++++ website/app/not-found.tsx | 9 + website/{src/index-page.tsx => app/page.tsx} | 6 +- website/mdx-components.js | 1 + website/next-env.d.ts | 2 +- website/{next.config.js => next.config.ts} | 0 website/package.json | 5 +- website/public/subheader-logo.svg | 6 +- website/src/pages/404.mdx | 5 - website/src/pages/_app.tsx | 6 - website/src/pages/docs/_meta.ts | 5 - website/src/pages/docs/import.mdx | 5 - website/src/pages/docs/index.mdx | 105 --------- website/src/pages/docs/remote.mdx | 38 ---- website/src/pages/index.mdx | 5 - website/theme.config.tsx | 18 -- website/tsconfig.json | 16 +- 110 files changed, 1438 insertions(+), 1500 deletions(-) create mode 100644 .changeset/@theguild_components-1762-dependencies.md create mode 100644 .changeset/@theguild_components-1824-dependencies.md create mode 100644 .changeset/@theguild_components-1844-dependencies.md create mode 100644 .changeset/brave-sloths-film.md create mode 100644 .changeset/eight-dots-compare.md create mode 100644 .changeset/odd-penguins-cry.md create mode 100644 .changeset/tasty-deers-pretend.md create mode 100644 .changeset/tidy-hotels-compare.md create mode 100644 .changeset/unlucky-dolphins-arrive.md delete mode 100644 packages/components/src/compile.ts delete mode 100644 packages/components/src/components/company-menu.tsx create mode 100644 packages/components/src/components/contact-us.tsx delete mode 100644 packages/components/src/components/footer.stories.ts delete mode 100644 packages/components/src/components/footer.tsx create mode 100644 packages/components/src/components/giscus.tsx delete mode 100644 packages/components/src/components/guild-navbar-logo.stories.tsx delete mode 100644 packages/components/src/components/guild-navbar-logo.tsx rename packages/components/src/components/{hive-footer.stories.tsx => hive-footer/index.stories.tsx} (51%) rename packages/components/src/components/{hive-footer.tsx => hive-footer/index.tsx} (85%) rename packages/components/src/components/hive-navigation/{hive-navigation.stories.tsx => index.stories.tsx} (80%) delete mode 100644 packages/components/src/components/mdx-components.tsx create mode 100644 packages/components/src/constants.ts delete mode 100644 packages/components/src/define-config.tsx delete mode 100644 packages/components/src/helpers/render-slot.tsx delete mode 100644 packages/components/src/helpers/utils.ts create mode 100644 packages/components/src/next-types.ts delete mode 100644 packages/components/src/next.config.ts create mode 100644 packages/components/src/server/index.ts create mode 100644 packages/components/src/server/mdx-components.tsx create mode 100644 packages/components/src/server/next.config.ts rename packages/components/src/{ => server}/npm.ts (100%) create mode 100644 packages/components/src/server/pages.ts create mode 100644 packages/components/src/server/theme-layout.tsx rename packages/components/src/{ => server}/underscore-redirects.ts (100%) create mode 100644 patches/esbuild-plugin-svgr.patch rename website/{src/pages => app}/_meta.ts (51%) create mode 100644 website/app/docs/_meta.ts create mode 100644 website/app/docs/import/page.mdx rename website/{src => app/docs/import}/reused.mdx (100%) rename website/{src/pages/docs/mermaid.mdx => app/docs/mermaid/page.mdx} (98%) rename website/{src/pages/docs/npm2yarn.mdx => app/docs/npm2yarn/page.mdx} (100%) create mode 100644 website/app/docs/page.mdx create mode 100644 website/app/docs/remote/page.mdx rename website/{src/pages/docs/video.mdx => app/docs/video/page.mdx} (52%) rename website/{public/fav.ico => app/favicon.ico} (100%) create mode 100644 website/app/layout.tsx create mode 100644 website/app/not-found.tsx rename website/{src/index-page.tsx => app/page.tsx} (94%) create mode 100644 website/mdx-components.js rename website/{next.config.js => next.config.ts} (100%) delete mode 100644 website/src/pages/404.mdx delete mode 100644 website/src/pages/_app.tsx delete mode 100644 website/src/pages/docs/_meta.ts delete mode 100644 website/src/pages/docs/import.mdx delete mode 100644 website/src/pages/docs/index.mdx delete mode 100644 website/src/pages/docs/remote.mdx delete mode 100644 website/src/pages/index.mdx delete mode 100644 website/theme.config.tsx diff --git a/.changeset/@theguild_components-1762-dependencies.md b/.changeset/@theguild_components-1762-dependencies.md new file mode 100644 index 000000000..3174696b4 --- /dev/null +++ b/.changeset/@theguild_components-1762-dependencies.md @@ -0,0 +1,9 @@ +--- +"@theguild/components": patch +--- +dependencies updates: + - Updated dependency [`nextra@4.0.0-app-router.34` ↗︎](https://www.npmjs.com/package/nextra/v/4.0.0) (from `3.2.5`, in `dependencies`) + - Updated dependency [`nextra-theme-docs@4.0.0-app-router.34` ↗︎](https://www.npmjs.com/package/nextra-theme-docs/v/4.0.0) (from `3.2.5`, in `dependencies`) + - Removed dependency [`next-videos@1.5.0` ↗︎](https://www.npmjs.com/package/next-videos/v/1.5.0) (from `dependencies`) + - Removed dependency [`remark-mdx-disable-explicit-jsx@0.1.0` ↗︎](https://www.npmjs.com/package/remark-mdx-disable-explicit-jsx/v/0.1.0) (from `dependencies`) + - Updated dependency [`@theguild/tailwind-config@^0.6.2` ↗︎](https://www.npmjs.com/package/@theguild/tailwind-config/v/0.6.2) (from `0.6.2`, in `peerDependencies`) diff --git a/.changeset/@theguild_components-1824-dependencies.md b/.changeset/@theguild_components-1824-dependencies.md new file mode 100644 index 000000000..24e3d48b4 --- /dev/null +++ b/.changeset/@theguild_components-1824-dependencies.md @@ -0,0 +1,6 @@ +--- +"@theguild/components": patch +--- +dependencies updates: + - Updated dependency [`nextra@4.0.0-app-router.34` ↗︎](https://www.npmjs.com/package/nextra/v/4.0.0) (from `4.0.0-app-router.28`, in `dependencies`) + - Updated dependency [`nextra-theme-docs@4.0.0-app-router.34` ↗︎](https://www.npmjs.com/package/nextra-theme-docs/v/4.0.0) (from `4.0.0-app-router.21`, in `dependencies`) diff --git a/.changeset/@theguild_components-1844-dependencies.md b/.changeset/@theguild_components-1844-dependencies.md new file mode 100644 index 000000000..d4f776a29 --- /dev/null +++ b/.changeset/@theguild_components-1844-dependencies.md @@ -0,0 +1,6 @@ +--- +"@theguild/components": patch +--- +dependencies updates: + - Updated dependency [`nextra@4.0.0-app-router.34` ↗︎](https://www.npmjs.com/package/nextra/v/4.0.0) (from `4.0.0-app-router.28`, in `dependencies`) + - Updated dependency [`nextra-theme-docs@4.0.0-app-router.34` ↗︎](https://www.npmjs.com/package/nextra-theme-docs/v/4.0.0) (from `4.0.0-app-router.28`, in `dependencies`) diff --git a/.changeset/brave-sloths-film.md b/.changeset/brave-sloths-film.md new file mode 100644 index 000000000..e0de04e3d --- /dev/null +++ b/.changeset/brave-sloths-film.md @@ -0,0 +1,5 @@ +--- +"@theguild/components": patch +--- + +Add `NextPageProps` utility type diff --git a/.changeset/eight-dots-compare.md b/.changeset/eight-dots-compare.md new file mode 100644 index 000000000..cc09f9c72 --- /dev/null +++ b/.changeset/eight-dots-compare.md @@ -0,0 +1,5 @@ +--- +"@theguild/components": patch +--- + +Use green card variant only for Hive diff --git a/.changeset/odd-penguins-cry.md b/.changeset/odd-penguins-cry.md new file mode 100644 index 000000000..5c8946be1 --- /dev/null +++ b/.changeset/odd-penguins-cry.md @@ -0,0 +1,5 @@ +--- +'@theguild/components': major +--- + +Update components to be compatible with Nextra 4 and server components diff --git a/.changeset/tasty-deers-pretend.md b/.changeset/tasty-deers-pretend.md new file mode 100644 index 000000000..e12f7f469 --- /dev/null +++ b/.changeset/tasty-deers-pretend.md @@ -0,0 +1,5 @@ +--- +'@theguild/components': patch +--- + +Add ContactTextLink and ContactButton diff --git a/.changeset/tidy-hotels-compare.md b/.changeset/tidy-hotels-compare.md new file mode 100644 index 000000000..cc8426f80 --- /dev/null +++ b/.changeset/tidy-hotels-compare.md @@ -0,0 +1,5 @@ +--- +"@theguild/components": patch +--- + +Add "use client" to Heading diff --git a/.changeset/unlucky-dolphins-arrive.md b/.changeset/unlucky-dolphins-arrive.md new file mode 100644 index 000000000..71baea782 --- /dev/null +++ b/.changeset/unlucky-dolphins-arrive.md @@ -0,0 +1,5 @@ +--- +'@theguild/remark-mermaid': minor +--- + +`"typesVersions"` field is removed from `package.json`, use `"moduleResolution": "node"` in your `tsconfig.json` diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 867f43eb1..65bc7a7a5 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -34,21 +34,14 @@ module.exports = { config: 'tailwind.config.ts', whitelist: [ // TODO: find a way to fix it and remove these classes since they are imported somewhere and are used - 'line', 'hive-focus', 'hive-focus-within', - '@container', // Tailwind ESLint Plugin doesn't see the Container Queries classes but it does see prefixes like @sm: + 'nextra-hamburger', + '@container', // Tailwind ESLint Plugin doesn't see the Container Queries classes, but it does see prefixes like @sm: ], }, }, overrides: [ - { - files: ['**/*.stories.{ts,tsx}'], - rules: { - 'no-console': 'off', - 'import/no-default-export': 'off', - }, - }, { files: ['packages/**'], rules: { diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 194610227..3815d1eda 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -49,6 +49,9 @@ jobs: - name: Build run: pnpm build + - name: Build Docs Example + run: pnpm build-example + - name: Lint Prettier run: pnpm lint:prettier @@ -60,6 +63,3 @@ jobs: - name: Test run: pnpm test - - - name: Build Storybook - run: pnpm build-storybook diff --git a/.github/workflows/cloudflare-workers.yaml b/.github/workflows/cloudflare-workers.yaml index 16fa4b4c3..d54313c7f 100644 --- a/.github/workflows/cloudflare-workers.yaml +++ b/.github/workflows/cloudflare-workers.yaml @@ -25,7 +25,7 @@ jobs: - name: Deploy working-directory: ./packages/og-image - run: pnpm run deploy + run: pnpm deploy env: CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }} CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }} diff --git a/.storybook/main.ts b/.storybook/main.ts index 859359951..196f4b86a 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -12,7 +12,7 @@ export default { typescript: { reactDocgen: false, }, - env(config: Record) { + env(config) { return config; }, webpackFinal(config: Configuration) { diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index fb2878f2b..b7f5105f9 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -21,6 +21,9 @@ export const parameters: Preview['parameters'] = { }, // Remove padding from storybook in mobile layout: 'fullscreen', + nextjs: { + appDirectory: true, + }, }; export const decorators: Preview['decorators'] = [ diff --git a/package.json b/package.json index b7db38334..507447634 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,11 @@ "private": true, "packageManager": "pnpm@9.15.0", "scripts": { - "build": "turbo run build", + "build": "turbo run build --filter=!website", + "build-example": "turbo run build --filter=website", "build-storybook": "storybook build", "build:css": "NODE_ENV=production tailwindcss --config tailwind.config.ts --postcss --output packages/components/style.css", + "clean": "pnpm -r exec sh -c 'rm -rf .next .turbo dist out'", "dev": "turbo run dev --parallel", "lint": "ESLINT_USE_FLAT_CONFIG=false eslint --cache --ignore-path .gitignore .", "lint:prettier": "prettier --cache --check .", @@ -58,7 +60,7 @@ "tailwindcss": "3.4.16", "tailwindcss-animate": "^1.0.7", "tsconfig-paths-webpack-plugin": "4.2.0", - "tsup": "8.3.0", + "tsup": "8.3.5", "tsx": "4.19.2", "turbo": "2.3.3", "typescript": "5.7.2", @@ -82,11 +84,11 @@ "overrides": { "@theguild/remark-npm2yarn": "workspace:*", "@theguild/remark-mermaid": "workspace:*", - "esbuild": "0.24.0", - "eslint-plugin-react-hooks": "5.0.0" + "esbuild": "0.24.0" }, "patchedDependencies": { - "tsup@8.3.0": "patches/tsup@8.2.1.patch" + "tsup@8.3.5": "patches/tsup@8.2.1.patch", + "esbuild-plugin-svgr": "patches/esbuild-plugin-svgr.patch" } } } diff --git a/packages/components/package.json b/packages/components/package.json index 39783d9d4..ed094f890 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -11,42 +11,28 @@ "./style.css": "./style.css", "./package.json": "./package.json", ".": { - "import": "./dist/index.js", - "types": "./dist/index.d.mts" + "types": "./dist/index.d.mts", + "import": "./dist/index.js" }, "./next.config": { - "import": "./dist/next.config.mjs", - "types": "./dist/next.config.d.mts" + "types": "./dist/server/next.config.d.mts", + "import": "./dist/server/next.config.js", + "require": "./dist/server/next.config.js" }, - "./compile": { - "import": "./dist/compile.mjs", - "types": "./dist/compile.d.mts" + "./server": { + "types": "./dist/server/index.d.mts", + "import": "./dist/server/index.js" + }, + "./pages": { + "types": "./dist/server/pages.d.mts", + "import": "./dist/server/pages.js" }, "./*": { - "import": "./dist/*.js", - "types": "./dist/*.d.mts" + "types": "./dist/*.d.mts", + "import": "./dist/*.js" } }, "types": "./dist/index.d.mts", - "typesVersions": { - "*": { - ".": [ - "./dist/index.d.mts" - ], - "logos": [ - "./dist/logos.d.mts" - ], - "products": [ - "./dist/products.d.mts" - ], - "next.config": [ - "./dist/next.config.d.mts" - ], - "compile": [ - "./dist/compile.d.mts" - ] - } - }, "files": [ "dist", "style.css" @@ -58,7 +44,7 @@ "types:check": "tsc --noEmit" }, "peerDependencies": { - "@theguild/tailwind-config": "0.6.2", + "@theguild/tailwind-config": "^0.6.2", "next": "^13 || ^14 || ^15.0.0", "react": "^18.2.0", "react-dom": "^18.2.0" @@ -69,12 +55,10 @@ "@radix-ui/react-navigation-menu": "^1.2.0", "clsx": "2.1.1", "fuzzy": "0.1.3", - "next-videos": "1.5.0", - "nextra": "3.2.5", - "nextra-theme-docs": "3.2.5", + "nextra": "4.0.0-app-router.34", + "nextra-theme-docs": "4.0.0-app-router.34", "react-paginate": "8.2.0", "react-player": "2.16.0", - "remark-mdx-disable-explicit-jsx": "0.1.0", "semver": "^7.3.8", "tailwind-merge": "^2.5.2" }, diff --git a/packages/components/src/cn.ts b/packages/components/src/cn.ts index a2402ab77..186147fb1 100644 --- a/packages/components/src/cn.ts +++ b/packages/components/src/cn.ts @@ -1,8 +1,6 @@ -import { ClassValue, clsx } from 'clsx'; +import { clsx } from 'clsx'; import { twMerge } from 'tailwind-merge'; -export type { ClassValue }; - -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); -} +export const cn: typeof clsx = (...args) => { + return twMerge(clsx(args)); +}; diff --git a/packages/components/src/compile.ts b/packages/components/src/compile.ts deleted file mode 100644 index a37484eee..000000000 --- a/packages/components/src/compile.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from 'nextra/compile'; -export { remarkLinkRewrite } from 'nextra/remark-plugins'; -export { buildDynamicMDX, buildDynamicMeta } from 'nextra/remote'; -export { fetchFilePathsFromGitHub } from 'nextra/fetch-filepaths-from-github'; diff --git a/packages/components/src/components/anchor.tsx b/packages/components/src/components/anchor.tsx index c7ed8b7e6..22df3b8f3 100644 --- a/packages/components/src/components/anchor.tsx +++ b/packages/components/src/components/anchor.tsx @@ -5,17 +5,12 @@ import { ILink } from '../types/components'; export type AnchorProps = ILink; export const Anchor = forwardRef(function Anchor( - { href = '', children, newWindow, sameSite, className, ...props }, + { href = '', children, newWindow, className, ...props }, forwardedRef, ): ReactElement { const classes = clsx(className, 'outline-none transition focus-visible:ring'); if (typeof href === 'string') { - if (sameSite) { - const url = new URL(href); - href = url.pathname + url.search + url.hash; - } - if (href.startsWith('#')) { return ( diff --git a/packages/components/src/components/company-menu.tsx b/packages/components/src/components/company-menu.tsx deleted file mode 100644 index 66a3d20cf..000000000 --- a/packages/components/src/components/company-menu.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { MenuItem, PageItem } from 'nextra/normalize-pages'; -import { PRODUCTS } from '../products'; - -export const productsItems = Object.fromEntries( - Object.values(PRODUCTS).map(product => [ - product.name, - { - title: ( - - - {product.name} - // todo: fix type in nextra - ) as unknown as string, - href: product.href, - }, - ]), -); - -export function addGuildCompanyMenu(items: (PageItem | MenuItem)[]): (PageItem | MenuItem)[] { - return [ - { - type: 'menu', - title: 'Company', - items: { - about: { - title: 'About', - href: 'https://the-guild.dev/about-us', - newWindow: true, - }, - blog: { - title: 'Blog', - href: 'https://the-guild.dev/blog', - newWindow: true, - }, - contact: { - title: 'Contact', - href: 'https://the-guild.dev/#get-in-touch', - newWindow: true, - }, - }, - name: 'company', - route: '#', - } satisfies MenuItem, - { - type: 'menu', - title: 'Products', - items: productsItems, - name: 'products', - route: '#', - } satisfies MenuItem, - ...items, - ]; -} diff --git a/packages/components/src/components/contact-us.tsx b/packages/components/src/components/contact-us.tsx new file mode 100644 index 000000000..d6f597aa9 --- /dev/null +++ b/packages/components/src/components/contact-us.tsx @@ -0,0 +1,44 @@ +'use client'; + +import { cn } from '../cn'; +import { CallToAction, CallToActionProps } from './call-to-action'; + +const openCrisp = (event: React.MouseEvent) => { + if (window.$crisp) { + window.$crisp.push(['do', 'chat:open']); + event.preventDefault(); + } +}; + +// the errors are more readable if you add an interface for this +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +export interface ContactTextLinkProps + extends Omit, 'href' | 'onClick'> {} + +export function ContactTextLink(props: ContactTextLinkProps) { + return ( + + {props.children || 'Contact Us'} + + ); +} + +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +export interface ContactButtonProps + extends Omit {} + +export function ContactButton(props: ContactButtonProps) { + return ( + + {props.children || 'Contact Us'} + + ); +} diff --git a/packages/components/src/components/cookies-consent.tsx b/packages/components/src/components/cookies-consent.tsx index 761867830..d82e049a3 100644 --- a/packages/components/src/components/cookies-consent.tsx +++ b/packages/components/src/components/cookies-consent.tsx @@ -1,27 +1,35 @@ -import { useState } from 'react'; +'use client'; + +import { ComponentProps, useLayoutEffect, useState } from 'react'; import { cn } from '../cn'; import { CallToAction } from './call-to-action'; -export type CookiesConsentProps = React.HTMLAttributes; +export type CookiesConsentProps = ComponentProps<'div'>; + export function CookiesConsent(props: CookiesConsentProps) { - const [consented, setConsented] = useState(() => localStorage.getItem('cookies') === 'true'); + const [consented, setConsented] = useState<'unknown' | 'yes' | 'no' | 'closing'>('unknown'); - const onAccept = () => { - setConsented(true); - localStorage.setItem('cookies', 'true'); - }; + useLayoutEffect(() => { + setConsented(localStorage.getItem('cookies') === 'true' ? 'yes' : 'no'); + }, []); - if (consented) { + if (consented === 'unknown' || consented === 'yes') { return null; } return (
{ + if (consented === 'closing') { + setConsented('yes'); + } + }} >

@@ -38,7 +46,14 @@ export function CookiesConsent(props: CookiesConsentProps) { > Privacy Policy - + { + setConsented('closing'); + localStorage.setItem('cookies', 'true'); + }} + className="px-4 py-2" + > Allow

diff --git a/packages/components/src/components/footer.stories.ts b/packages/components/src/components/footer.stories.ts deleted file mode 100644 index cba88cce0..000000000 --- a/packages/components/src/components/footer.stories.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; -import { Footer } from './footer'; - -export default { - title: 'Components/Footer', - component: Footer, - argTypes: { - sameSite: { - name: 'Same Site', - description: 'Use this to force links to open in the same tab, using the root domain.', - }, - resources: { - name: 'Resources Links', - description: "Use this to add current site's links to the footer.", - }, - }, -} satisfies Meta; - -type Story = StoryObj; - -export const Default: Story = { - args: { - sameSite: false, - resources: [ - { - children: 'Documentation', - title: 'Read the Docs', - href: '/docs1', - onClick(e) { - e.preventDefault(); - alert('Internal link handler'); - }, - }, - { - children: 'Quick start', - title: 'Learn first steps', - href: '/docs2', - onClick(e) { - e.preventDefault(); - alert('Internal link handler'); - }, - }, - ], - }, -}; diff --git a/packages/components/src/components/footer.tsx b/packages/components/src/components/footer.tsx deleted file mode 100644 index 80de98d0b..000000000 --- a/packages/components/src/components/footer.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import { FC, ReactElement, SVGProps } from 'react'; -import { clsx } from 'clsx'; -import { GuildLogo, TheGuild } from '../logos'; -import { PRODUCTS } from '../products'; -import { IFooterExtendedProps, ILink } from '../types/components'; -import { Anchor } from './anchor'; -import { - CSAStarLevelOneIcon, - DiscordIcon, - GitHubIcon, - LinkedInIcon, - TwitterIcon, - YouTubeIcon, -} from './icons'; - -const COMPANY: ILink[] = [ - { - children: 'About', - title: 'Learn more about us', - href: 'https://the-guild.dev/about-us', - }, - { - children: 'Blog', - title: 'Read our blog', - href: 'https://the-guild.dev/blog', - }, - { - children: 'Newsletter', - title: 'Newsletter', - href: 'https://the-guild.dev/newsletter', - }, -]; - -const COMMUNITY: (Omit & { - icon: FC>; -})[] = [ - { - icon: TwitterIcon, - title: 'Visit our Twitter', - href: 'https://twitter.com/TheGuildDev', - }, - { - icon: LinkedInIcon, - title: 'Visit our LinkedIn', - href: 'https://linkedin.com/company/the-guild-software', - }, - { - icon: DiscordIcon, - title: 'Reach us on Discord', - href: 'https://discord.com/invite/xud7bH9', - }, - { - icon: GitHubIcon, - title: 'Check our GitHub account', - href: 'https://github.com/the-guild-org', - }, - { - icon: YouTubeIcon, - title: 'Watch Our Videos', - href: 'https://youtube.com/watch?v=d_GBgH-L5c4&list=PLhCf3AUOg4PgQoY_A6xWDQ70yaNtPYtZd', - }, -]; - -const products = [ - PRODUCTS.HIVE, - PRODUCTS.MESH, - PRODUCTS.YOGA, - PRODUCTS.CODEGEN, - PRODUCTS.NEXTRA, - { ...PRODUCTS.SOFA, name: 'GraphQL to REST' }, -].map(({ name, href, title }) => ({ - children: name, - href, - title, -})); - -const classes = { - title: clsx('mb-2.5 text-lg font-medium text-gray-900 dark:text-gray-100'), - anchor: clsx('text-gray-500 hover:text-black dark:text-[#b4b5be] hover:dark:text-gray-100'), -}; - -const renderLinks = (list: ILink[]) => ( -
    - {list.map((link, i) => ( -
  • - -
    • - ))} -
-); - -export function Footer({ - className, - sameSite, - resources = [], - logo, -}: IFooterExtendedProps): ReactElement { - return ( -
-
-
- - - - -
-

Products

-
{renderLinks(products)}
-
-
-

Resources

- {renderLinks([ - { - children: 'Press Kit', - title: 'Press Kit', - href: 'https://the-guild.dev/logos', - }, - ...resources, - ])} -
-
-

Company

- {renderLinks(COMPANY)} -
-
- {COMMUNITY.map(({ icon: Icon, ...iconProps }) => ( - - - - ))} -
- -
-
-
- ); -} diff --git a/packages/components/src/components/get-your-api-game-right-section.tsx b/packages/components/src/components/get-your-api-game-right-section.tsx index a980a244b..73aa029e3 100644 --- a/packages/components/src/components/get-your-api-game-right-section.tsx +++ b/packages/components/src/components/get-your-api-game-right-section.tsx @@ -1,5 +1,6 @@ import { cn } from '../cn'; import { CallToAction } from './call-to-action'; +import { ContactButton } from './contact-us'; import { DecorationIsolation } from './decorations'; import { Heading } from './heading'; @@ -12,7 +13,7 @@ export function GetYourAPIGameRightSection({ className }: { className?: string } -
+
Get your API game right. -
+
Get started for free - { - if (window.$crisp) { - window.$crisp.push(['do', 'chat:open']); - event.preventDefault(); - } - }} - > - Talk to us - + Talk to us
diff --git a/packages/components/src/components/giscus.tsx b/packages/components/src/components/giscus.tsx new file mode 100644 index 000000000..7a350d9d6 --- /dev/null +++ b/packages/components/src/components/giscus.tsx @@ -0,0 +1,15 @@ +'use client'; + +import { FC } from 'react'; +import { useTheme } from 'nextra-theme-docs'; +import { default as _Giscus, GiscusProps } from '@giscus/react'; + +export const Giscus: FC = props => { + const { resolvedTheme } = useTheme(); + return ( + <> +
+ <_Giscus theme={resolvedTheme} {...props} /> + + ); +}; diff --git a/packages/components/src/components/guild-navbar-logo.stories.tsx b/packages/components/src/components/guild-navbar-logo.stories.tsx deleted file mode 100644 index 09177f962..000000000 --- a/packages/components/src/components/guild-navbar-logo.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; -import { HiveCombinationMark, MeshLogo } from '../logos'; -import { getNavbarLogo, GuildUnifiedLogo } from './guild-navbar-logo'; - -export default { - title: 'Components/GuildNavbarLogo', - component: GuildUnifiedLogo, -} satisfies Meta; - -export const Default: StoryObj = { - args: { - title: 'GraphQL Mesh', - description: 'GraphQL Gateway Framework and anything-to-GraphQL', - children: , - }, - render: props => ( -
- -
- ), -}; - -export const Hive: StoryObj = { - render: () => getNavbarLogo(HiveCombinationMark, 'Hive', ''), -}; diff --git a/packages/components/src/components/guild-navbar-logo.tsx b/packages/components/src/components/guild-navbar-logo.tsx deleted file mode 100644 index 54485c7de..000000000 --- a/packages/components/src/components/guild-navbar-logo.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { ReactElement } from 'react'; -import clsx from 'clsx'; -import { DocsThemeConfig } from 'nextra-theme-docs'; -import { GuildLogo, TheGuild } from '../logos'; -import { Anchor } from './anchor'; - -export function GuildUnifiedLogo({ - children, - title, - description, -}: { - children: DocsThemeConfig['logo']; - title: string; - description: string; -}): ReactElement { - return ( - <> - - - - - {children && ( - <> - - - - - {typeof children === 'function' ? children({}) : children} -
-

{title}

-

{description}

-
- - - )} - - ); -} - -/** - * GraphQL-related products live under the Hive platform brand, so we use a single logo for them. - * The rest gets The Guild / {Product} logo. - */ -export function getNavbarLogo( - logo: DocsThemeConfig['logo'], - websiteName: string, - description: string, -) { - return websiteName === 'Hive' ? ( - - {typeof logo === 'function' ? logo({}) : logo} - - ) : ( - - {logo} - - ); -} diff --git a/packages/components/src/components/heading.tsx b/packages/components/src/components/heading.tsx index 8e28dbd6c..08ec0af01 100644 --- a/packages/components/src/components/heading.tsx +++ b/packages/components/src/components/heading.tsx @@ -1,3 +1,5 @@ +'use client'; + import { ComponentPropsWithoutRef } from 'react'; import { cn } from '../cn'; diff --git a/packages/components/src/components/hero-video.tsx b/packages/components/src/components/hero-video.tsx index a22c2194b..0af42059e 100644 --- a/packages/components/src/components/hero-video.tsx +++ b/packages/components/src/components/hero-video.tsx @@ -1,12 +1,14 @@ -import { ReactElement } from 'react'; -import { useRouter } from 'next/router'; +'use client'; + +import { FC } from 'react'; +import { addBasePath } from 'next/dist/client/add-base-path'; import clsx from 'clsx'; import { useMounted } from 'nextra/hooks'; import ReactPlayer from 'react-player/lazy'; import { IHeroVideoProps } from '../types/components'; import { Anchor } from './anchor'; -export const HeroVideo = ({ +export const HeroVideo: FC = ({ title, description, link, @@ -14,8 +16,7 @@ export const HeroVideo = ({ flipped, className, videoProps, -}: IHeroVideoProps): ReactElement => { - const { basePath } = useRouter(); +}) => { // fixes Hydration failed error const mounted = useMounted(); return ( @@ -53,7 +54,9 @@ export const HeroVideo = ({ ; @@ -22,7 +20,6 @@ export default { export const Default: StoryObj = { name: 'HiveFooter', args: { - sameSite: false, items: { ...HiveFooter.DEFAULT_ITEMS, resources: [ @@ -42,15 +39,12 @@ export const Default: StoryObj = { export const CodegenFooter: StoryObj = { ...Default, args: { - logo: { - href: '/', - children: ( -
- - Codegen -
- ), - }, + logo: ( +
+ + Codegen +
+ ), description: 'End-to-end type safety', }, }; diff --git a/packages/components/src/components/hive-footer.tsx b/packages/components/src/components/hive-footer/index.tsx similarity index 85% rename from packages/components/src/components/hive-footer.tsx rename to packages/components/src/components/hive-footer/index.tsx index f1c94fd96..b5e6364d3 100644 --- a/packages/components/src/components/hive-footer.tsx +++ b/packages/components/src/components/hive-footer/index.tsx @@ -1,9 +1,11 @@ import { ComponentProps, ReactNode } from 'react'; -import { cn } from '../cn'; -import { HiveCombinationMark } from '../logos'; -import { FOUR_MAIN_PRODUCTS, SIX_HIGHLIGHTED_PRODUCTS } from '../products'; -import { IFooterExtendedProps, ILink } from '../types/components'; -import { Anchor } from './anchor'; +import { cn } from '../../cn'; +import { siteOrigin } from '../../constants'; +import { HiveCombinationMark } from '../../logos'; +import { FOUR_MAIN_PRODUCTS, SIX_HIGHLIGHTED_PRODUCTS } from '../../products'; +import { ILink } from '../../types/components'; +import { Anchor } from '../anchor'; +import { ContactTextLink } from '../contact-us'; import { CSAStarLevelOneIcon, DiscordIcon, @@ -11,38 +13,34 @@ import { LinkedInIcon, TwitterIcon, YouTubeIcon, -} from './icons'; +} from '../icons/index'; -export interface HiveFooterProps extends IFooterExtendedProps { +export type HiveFooterProps = { + className?: string; + logo?: ReactNode; + href?: string; description?: string; - /** - * @deprecated use `items` instead - */ - resources?: never; items?: HiveFooterItems; -} +}; export function HiveFooter({ className, - logo, - sameSite, - description, - items = {}, + logo = , + href = `${siteOrigin}/`, + description = 'Open-source GraphQL management platform', + items, }: HiveFooterProps) { items = { ...HiveFooter.DEFAULT_ITEMS, ...items }; - description ||= 'Open-source GraphQL management platform'; return (
-
+
{SOCIAL_ICONS.map(({ icon: Icon, ...iconProps }) => ( - + GraphQLConf 2024 diff --git a/packages/components/src/components/hive-navigation/hive-navigation.stories.tsx b/packages/components/src/components/hive-navigation/index.stories.tsx similarity index 80% rename from packages/components/src/components/hive-navigation/hive-navigation.stories.tsx rename to packages/components/src/components/hive-navigation/index.stories.tsx index ebcffa516..8fdcaeff2 100644 --- a/packages/components/src/components/hive-navigation/hive-navigation.stories.tsx +++ b/packages/components/src/components/hive-navigation/index.stories.tsx @@ -1,9 +1,16 @@ -import { DocsThemeConfig, default as NextraLayout } from 'nextra-theme-docs'; import { Meta, StoryContext, StoryObj } from '@storybook/react'; import { hiveThemeDecorator } from '../../../../../.storybook/hive-theme-decorator'; +import { siteOrigin } from '../../constants'; import { PRODUCTS } from '../../products'; import { Anchor } from '../anchor'; -import { CodegenIcon, GitHubIcon, PaperIcon, PencilIcon } from '../icons'; +import { + CodegenIcon, + GitHubIcon, + PaperIcon, + PencilIcon, + RightCornerIcon, + TargetIcon, +} from '../icons'; import { GraphQLConfCard } from './graphql-conf-card'; import { CompanyMenu, @@ -22,12 +29,33 @@ import { } from './navigation-menu'; import graphQLConfLocalImage from './local-image-for-stories.png'; +const HIVE_DEVELOPER_MENU: HiveNavigationProps['developerMenu'] = [ + { + href: '/docs', + icon: , + children: 'Documentation', + }, + { href: 'https://status.graphql-hive.com/', icon: , children: 'Status' }, + { + href: '/product-updates', + icon: , + children: 'Product Updates', + }, + { href: `${siteOrigin}/blog`, icon: , children: 'Blog' }, + { + href: 'https://github.com/dotansimha/graphql-code-generator', + icon: , + children: 'GitHub', + }, +]; + export default { title: 'Hive/HiveNavigation', component: HiveNavigation, decorators: [hiveThemeDecorator, nextraThemeDocsCtxDecorator], args: { productName: 'Hive', + developerMenu: HIVE_DEVELOPER_MENU, }, } satisfies Meta; @@ -41,6 +69,9 @@ export const Default: StoryObj = {
), ], + args: { + developerMenu: HIVE_DEVELOPER_MENU, + }, }; export const NarrowMaxWidth: StoryObj = { @@ -115,7 +146,7 @@ export const Developer: StoryObj = { render() { return ( - + ); }, @@ -161,17 +192,17 @@ export const CodegenNavmenu: StoryObj = { developerMenu: [ { href: '/docs', - icon: PaperIcon, + icon: , children: 'Documentation', }, { href: 'https://the-guild.dev/blog', - icon: PencilIcon, + icon: , children: 'Blog', }, { href: 'https://github.com/dotansimha/graphql-code-generator', - icon: GitHubIcon, + icon: , children: 'GitHub', }, ], @@ -186,19 +217,5 @@ export const CodegenNavmenu: StoryObj = { }; function nextraThemeDocsCtxDecorator(Story: () => React.ReactNode, _ctx: StoryContext) { - return ( - null }, - footer: { component: () => null }, - } satisfies DocsThemeConfig - } - > - - - ); + return ; } diff --git a/packages/components/src/components/hive-navigation/index.tsx b/packages/components/src/components/hive-navigation/index.tsx index 6550c18d9..3599d1811 100644 --- a/packages/components/src/components/hive-navigation/index.tsx +++ b/packages/components/src/components/hive-navigation/index.tsx @@ -1,11 +1,22 @@ -import React, { forwardRef, Fragment, ReactNode, useEffect, useRef } from 'react'; +'use client'; + +import React, { + ComponentProps, + FC, + forwardRef, + Fragment, + ReactNode, + useEffect, + useRef, +} from 'react'; import { createPortal } from 'react-dom'; -import { useRouter } from 'next/router'; -import { useMenu, useThemeConfig } from 'nextra-theme-docs'; +import { usePathname } from 'next/navigation'; +import { setMenu, useMenu } from 'nextra-theme-docs'; +import { Search } from 'nextra/components'; import { useMounted } from 'nextra/hooks'; import { MenuIcon } from 'nextra/icons'; import { cn } from '../../cn'; -import { renderSlot } from '../../helpers/render-slot'; +import { siteOrigin } from '../../constants'; import { GraphQLFoundationLogo, GuildLogo, HiveCombinationMark, TheGuild } from '../../logos'; import { PRODUCTS, SIX_HIGHLIGHTED_PRODUCTS } from '../../products'; import { Anchor } from '../anchor'; @@ -15,15 +26,10 @@ import { AppsIcon, ArrowIcon, BardIcon, - GitHubIcon, GroupIcon, HiveIcon, HonourIcon, - PaperIcon, - PencilIcon, - RightCornerIcon, ShieldFlashIcon, - TargetIcon, } from '../icons'; import { NavigationMenu, @@ -38,7 +44,7 @@ export * from './graphql-conf-card'; const ENTERPRISE_MENU_HIDDEN = true; -export interface HiveNavigationProps { +export type HiveNavigationProps = { companyMenuChildren?: ReactNode; children?: ReactNode; className?: string; @@ -48,13 +54,10 @@ export interface HiveNavigationProps { productName: string; logo?: ReactNode; navLinks?: { href: string; children: ReactNode }[]; - developerMenu?: { - href: string; - title?: string; - icon: React.FC<{ className?: string }>; - children: ReactNode; - }[]; -} + developerMenu: DeveloperMenuProps['developerMenu']; + searchProps?: ComponentProps; +}; + /** * * @example @@ -72,25 +75,17 @@ export function HiveNavigation({ children, className, productName, - logo, - navLinks, - developerMenu, -}: HiveNavigationProps) { - // `useThemeConfig` doesn't return anything outside of Nextra, and the provider isn't exported - const themeConfig = useThemeConfig() as ReturnType | undefined; - const Search = themeConfig?.search?.component; - - const isHive = productName === 'Hive'; - - const containerRef = useRef(null!); - - logo ||= ; - navLinks ||= [ + logo = , + navLinks = [ { - href: isHive ? '/pricing' : 'https://the-guild.dev/graphql/hive/pricing', + href: productName === 'Hive' ? '/pricing' : 'https://the-guild.dev/graphql/hive/pricing', children: 'Pricing', }, - ]; + ], + developerMenu, + searchProps, +}: HiveNavigationProps) { + const containerRef = useRef(null!); return (
Developer - + {!ENTERPRISE_MENU_HIDDEN && ( @@ -157,16 +152,15 @@ export function HiveNavigation({ {children} - {renderSlot(Search, { - className: cn( - 'relative ml-4 basis-64 [&_:is(input,kbd)]:text-green-700 dark:[&_:is(input,kbd)]:text-neutral-300 [&_input]:h-12 [&_input]:w-full [&_input]:rounded-lg [&_input]:border [&_input]:border-green-200 [&_input]:bg-white [&_input]:pl-4 [&_input]:pr-8 [&_input]:ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%/var(--tw-ring-opacity))] [&_input]:ring-offset-[rgb(var(--nextra-bg))] dark:[&_input]:border-neutral-800 [&_input]:dark:bg-inherit [&_kbd]:absolute [&_kbd]:right-4 [&_kbd]:top-1/2 [&_kbd]:my-0 [&_kbd]:-translate-y-1/2 [&_kbd]:border-none [&_kbd]:bg-green-200 dark:[&_kbd]:bg-neutral-700', - ), - })} + { @@ -178,7 +172,7 @@ export function HiveNavigation({ > Contact us - {isHive ? ( + {productName === 'Hive' ? ( Sign in @@ -195,17 +189,18 @@ export function HiveNavigation({ interface ProductsMenuProps extends MenuContentColumnsProps { productName: string; } + /** * @internal */ export const ProductsMenu = React.forwardRef( ({ productName, ...rest }, ref) => { - const { asPath } = useRouter(); + const pathname = usePathname(); const bidirectionalProductLink = (product: (typeof PRODUCTS)[keyof typeof PRODUCTS]) => { if (productName === product.name) { // We link bidirectionally between the landing page and the docs. - return asPath === '/' ? '/docs' : '/'; + return pathname === '/' ? '/docs' : '/'; } return product.href; }; @@ -249,7 +244,7 @@ export const ProductsMenu = React.forwardRef(
@@ -277,7 +272,7 @@ export const ProductsMenu = React.forwardRef(
  • @@ -309,7 +304,8 @@ export const ProductsMenu = React.forwardRef( ); ProductsMenu.displayName = 'ProductsMenu'; -type MenuContentColumnsProps = React.HTMLAttributes; +type MenuContentColumnsProps = ComponentProps<'div'>; + const MenuContentColumns = forwardRef( (props: MenuContentColumnsProps, ref: React.ForwardedRef) => { return ( @@ -333,56 +329,19 @@ const MenuContentColumns = forwardRef( MenuContentColumns.displayName = 'MenuContentColumns'; interface DeveloperMenuProps extends React.HTMLAttributes { - isHive: boolean; - developerMenu: - | undefined - | { - href: string; - title?: string; - icon: React.FC<{ className?: string }>; - children: ReactNode; - }[]; + developerMenu: { + href: string; + title?: string; + icon: ReactNode; + children: ReactNode; + }[]; } + /** * @internal */ export const DeveloperMenu = React.forwardRef( - ({ isHive, developerMenu, ...rest }, ref) => { - developerMenu ||= [ - { - href: isHive ? '/docs' : 'https://the-guild.dev/graphql/hive/docs', - icon: PaperIcon, - title: 'Visit the documentation', - children: 'Documentation', - }, - { - href: 'https://status.graphql-hive.com/', - title: 'Check Hive status', - icon: TargetIcon, - children: 'Status', - }, - { - href: isHive ? '/product-updates' : 'https://the-guild.dev/graphql/hive/product-updates', - title: 'Read most recent developments from Hive', - icon: RightCornerIcon, - children: 'Product Updates', - }, - { - href: 'https://the-guild.dev/blog', - title: 'Read our blog post', - icon: PencilIcon, - children: 'Blog', - }, - { - href: isHive - ? 'https://github.com/graphql-hive/console' - : 'https://github.com/dotansimha/graphql-code-generator', - title: 'Give us a star', - icon: GitHubIcon, - children: 'GitHub', - }, - ]; - + ({ developerMenu, ...rest }, ref) => { return (
    @@ -410,7 +369,7 @@ export const DeveloperMenu = React.forwardRef ( - + }> {text} ))} @@ -426,22 +385,22 @@ function MenuColumnListItem({ children, href, title, - icon: Icon, + icon, }: { children: ReactNode; href: string; title?: string; - icon: React.FC<{ className?: string }>; + icon: ReactNode; }) { return (
  • - + {icon}

    {children}

    @@ -505,7 +464,7 @@ export function EnterpriseMenu() { ] as const ).map(([Icon, text, href], i) => { return ( - + }> {text} ); @@ -523,15 +482,15 @@ export function CompanyMenu({ children }: { children: React.ReactNode }) {
    Company
      - + } href={`${siteOrigin}/about-us`}> About Us - + } href={`${siteOrigin}/logos`}> Brand Assets
    Proudly made by - + @@ -561,14 +520,13 @@ function HiveLogoLink({ isHive }: { isHive: boolean }) { } function HamburgerButton() { - const { menu, setMenu } = useMenu(); - + const menu = useMenu(); return (