update @theguild/components to use Nextra 4 (#1762)

Co-authored-by: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.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`)

.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`)

.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`)

.changeset/brave-sloths-film.md

@@ -0,0 +1,5 @@
+---
+"@theguild/components": patch
+---
+
+Add `NextPageProps` utility type

.changeset/eight-dots-compare.md

@@ -0,0 +1,5 @@
+---
+"@theguild/components": patch
+---
+
+Use green card variant only for Hive

.changeset/odd-penguins-cry.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': major
+---
+
+Update components to be compatible with Nextra 4 and server components

.changeset/tasty-deers-pretend.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': patch
+---
+
+Add ContactTextLink and ContactButton

.changeset/tidy-hotels-compare.md

@@ -0,0 +1,5 @@
+---
+"@theguild/components": patch
+---
+
+Add "use client" to Heading

.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`

.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: {

.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

.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 }}

.storybook/main.ts

@@ -12,7 +12,7 @@ export default {
   typescript: {
     reactDocgen: false,
   },
-  env(config: Record<string, unknown>) {
+  env(config) {
     return config;
   },
   webpackFinal(config: Configuration) {

.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'] = [

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"
     }
   }
 }

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"
   },

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));
+};

packages/components/src/components/anchor.tsx

@@ -5,17 +5,12 @@ import { ILink } from '../types/components';
 
 export type AnchorProps = ILink;
 export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(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 (
         <a ref={forwardedRef} href={href} className={classes} {...props}>

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<HTMLAnchorElement>) => {
+  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<React.HTMLAttributes<HTMLAnchorElement>, 'href' | 'onClick'> {}
+
+export function ContactTextLink(props: ContactTextLinkProps) {
+  return (
+    <a
+      {...props}
+      className={cn(
+        'hive-focus -m-2 rounded p-2 font-medium hover:text-blue-700 hover:underline dark:hover:text-blue-100',
+        props.className,
+      )}
+      href="https://the-guild.dev/contact"
+      onClick={openCrisp}
+    >
+      {props.children || 'Contact Us'}
+    </a>
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ContactButtonProps
+  extends Omit<CallToActionProps.AnchorProps, 'onClick' | 'href'> {}
+
+export function ContactButton(props: ContactButtonProps) {
+  return (
+    <CallToAction href="https://the-guild.dev/contact" onClick={openCrisp} {...props}>
+      {props.children || 'Contact Us'}
+    </CallToAction>
+  );
+}