@theguild/components 7.2.0-alpha-20241101220642-0b6682d9cf4196529799e8ad0e38b83426590e93 → 8.0.0-alpha-20241103132221-f9d255adde945cffb98f9f7c914ac29896a15819

package/dist/{chunk-XKCA3AB7.js → components/icons/index.js}

@@ -1,25 +1,3 @@
-import {
-  EnvelopLettermark,
-  GraphQLESlintLettermark,
-  InspectorLettermark,
-  ScalarsLettermark,
-  SofaLettermark,
-  SvgAngular,
-  SvgConductor,
-  SvgConfig,
-  SvgFets,
-  SvgHeltin,
-  SvgKitql,
-  SvgModules,
-  SvgNextra,
-  SvgSse,
-  SvgStitching,
-  SvgTools,
-  SvgWhatsapp,
-  SvgWs,
-  cn
-} from "./chunk-EWF5AT2G.js";
-
 // src/components/icons/caret-slim.svg
 import { jsx } from "react/jsx-runtime";
 var SvgCaretSlim = (props) => /* @__PURE__ */ jsx("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 8L12 16L20 8", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) });
@@ -174,250 +152,35 @@ var SvgApps = (props) => /* @__PURE__ */ jsx26("svg", { width: 24, height: 24, v
 // src/components/icons/check.svg
 import { jsx as jsx27 } from "react/jsx-runtime";
 var SvgCheck = (props) => /* @__PURE__ */ jsx27("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", ...props, children: /* @__PURE__ */ jsx27("path", { d: "M16.667 5 7.5 14.167 3.333 10", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "square", strokeLinejoin: "round" }) });
-
-// src/products.tsx
-import { Fragment, jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
-var PRODUCTS = {
-  HIVE: {
-    name: "Hive",
-    title: "Schema registry for your GraphQL workflows",
-    href: "https://the-guild.dev/graphql/hive",
-    logo: SvgHive,
-    primaryColor: "#ffb21d"
-  },
-  MESH: {
-    name: "Mesh",
-    title: "A fully-featured GraphQL gateway framework",
-    href: "https://the-guild.dev/graphql/mesh",
-    logo: SvgMesh,
-    primaryColor: "#1bcbe2"
-  },
-  YOGA: {
-    name: "Yoga",
-    title: "A fully-featured, simple to set up, performant and extendable server",
-    href: "https://the-guild.dev/graphql/yoga-server",
-    logo: SvgYoga,
-    primaryColor: "#c026d3"
-  },
-  CONDUCTOR: {
-    name: "Conductor",
-    title: "All-in-one GraphQL Gateway",
-    href: "https://the-guild.dev/graphql/gateway",
-    logo: SvgConductor,
-    primaryColor: "#0f766e"
-  },
-  ENVELOP: {
-    name: "Envelop",
-    title: "Develop and share plugins that are usable with any GraphQL server framework or schema",
-    href: "https://the-guild.dev/graphql/envelop",
-    logo: EnvelopLettermark,
-    primaryColor: "#ff00e5"
-  },
-  STITCHING: {
-    name: "Stitching",
-    title: "Automatically stitch multiple schemas together into one larger API in a simple, fast and powerful way",
-    href: "https://the-guild.dev/graphql/stitching",
-    logo: SvgStitching,
-    primaryColor: "#f95428"
-  },
-  INSPECTOR: {
-    name: "Inspector",
-    title: "Schema management tool",
-    href: "https://the-guild.dev/graphql/inspector",
-    logo: InspectorLettermark,
-    primaryColor: "#59f79d"
-  },
-  CODEGEN: {
-    name: "Code Generator",
-    title: "Generation of typed queries, mutations, subscriptions and typed GraphQL resolvers",
-    href: "https://the-guild.dev/graphql/codegen",
-    logo: SvgCodegen,
-    primaryColor: "#0284c7"
-  },
-  TOOLS: {
-    name: "Tools",
-    title: "A set of utilities for faster GraphQL development",
-    href: "https://the-guild.dev/graphql/tools",
-    logo: SvgTools,
-    primaryColor: "#184ae8"
-  },
-  MODULES: {
-    name: "Modules",
-    title: "Enterprise grade tooling for your GraphQL server",
-    href: "https://the-guild.dev/graphql/modules",
-    logo: SvgModules,
-    primaryColor: "#e535ab"
-  },
-  ESLINT: {
-    name: "ESLint",
-    title: "Customisable ESLint parser, plugin and set rules for GraphQL",
-    href: "https://the-guild.dev/graphql/eslint",
-    logo: GraphQLESlintLettermark,
-    primaryColor: "#5639ca"
-  },
-  CONFIG: {
-    name: "Config",
-    title: "One configuration for all your GraphQL projects",
-    href: "https://the-guild.dev/graphql/config",
-    logo: SvgConfig,
-    primaryColor: "#6d7a99"
-  },
-  FETS: {
-    name: "feTS",
-    title: "Build and consume REST APIs with the e2e type safety using TypeScript and OpenAPI",
-    href: "https://the-guild.dev/fets",
-    logo: SvgFets,
-    primaryColor: "#3178c6"
-  },
-  SCALARS: {
-    name: "Scalars",
-    title: "Common custom GraphQL Scalars for precise type-safe GraphQL schemas",
-    href: "https://the-guild.dev/graphql/scalars",
-    logo: ScalarsLettermark,
-    primaryColor: "#f38"
-  },
-  SOFA: {
-    name: "SOFA",
-    title: "Generate RESTful APIs from your GraphQL server",
-    href: "https://the-guild.dev/graphql/sofa-api",
-    logo: SofaLettermark,
-    primaryColor: "#e873ff"
-  },
-  ANGULAR: {
-    name: "Angular",
-    title: "A fully-featured GraphQL client for Angular",
-    href: "https://the-guild.dev/graphql/apollo-angular",
-    logo: SvgAngular,
-    primaryColor: "#ff1035"
-  },
-  WHATSAPP: {
-    name: "WhatsApp",
-    title: "Full stack, open source tutorial",
-    href: "https://github.com/Urigo/WhatsApp-Clone-Tutorial",
-    logo: SvgWhatsapp,
-    primaryColor: "#31eb14"
-  },
-  KITQL: {
-    name: "KitQL",
-    title: "A set of tools, helping you building efficient apps in a fast way",
-    href: "https://kitql.dev",
-    logo: SvgKitql,
-    primaryColor: "#ff3e00"
-  },
-  WS: {
-    name: "WS",
-    title: "Reference implementation of the GraphQL over WS spec",
-    href: "https://the-guild.dev/graphql/ws",
-    logo: SvgWs,
-    primaryColor: "#0bf2e7"
-  },
-  SSE: {
-    name: "SSE",
-    title: "Reference implementation of the GraphQL over SSE spec",
-    href: "https://the-guild.dev/graphql/sse",
-    logo: SvgSse,
-    primaryColor: "#08e045"
-  },
-  HELTIN: {
-    name: "heltin",
-    title: "Mental healthcare registry",
-    href: "https://the-guild.dev/heltin",
-    logo: SvgHeltin,
-    primaryColor: "#1d90ff"
-  },
-  NEXTRA: {
-    name: "Nextra",
-    title: "Simple, powerful and flexible site generation framework with everything you love from Next.js",
-    href: "https://nextra.site",
-    logo: SvgNextra,
-    primaryColor: "#000"
-  }
-};
-var SIX_HIGHLIGHTED_PRODUCTS = [
-  PRODUCTS.INSPECTOR,
-  PRODUCTS.ENVELOP,
-  PRODUCTS.SOFA,
-  PRODUCTS.SCALARS,
-  PRODUCTS.ESLINT,
-  PRODUCTS.NEXTRA
-];
-var PRODUCTS_MENU_LIST = Object.fromEntries(
-  [
-    "The GraphQL Stack",
-    PRODUCTS.MESH,
-    PRODUCTS.YOGA,
-    PRODUCTS.CODEGEN,
-    "Libraries",
-    ...SIX_HIGHLIGHTED_PRODUCTS
-  ].map((item, i) => {
-    if (typeof item === "string") {
-      return [
-        i,
-        {
-          type: "separator",
-          title: /* @__PURE__ */ jsxs11(Fragment, { children: [
-            /* @__PURE__ */ jsx28("style", { className: "hive-label-separator", children: "li:has(>.hive-label-separator) { margin: 0.75rem 0 0.25rem 0; padding: 0 }" }),
-            /* @__PURE__ */ jsx28("span", { className: "ml-2 font-medium text-gray-500 dark:text-neutral-400", children: item })
-          ] })
-        }
-      ];
-    }
-    const Logo = item.logo;
-    return [
-      i,
-      {
-        type: "page",
-        href: item.href,
-        newWindow: true,
-        title: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx28(
-            Logo,
-            {
-              className: cn(
-                "size-4 translate-y-[0.25px]",
-                i > 3 && "rounded-sm bg-gray-500 text-[8px] text-white dark:bg-white/10"
-              )
-            }
-          ),
-          item.name
-        ] })
-      }
-    ];
-  })
-);
-
 export {
-  SvgCaretSlim,
-  SvgClose,
-  SvgMoon,
-  SvgMore,
-  SvgSearch,
-  SvgShare,
-  SvgCsaStarLevelOne,
-  SvgArrowIcon,
-  SvgTwitter,
-  SvgLinkedin,
-  SvgYoutube,
-  SvgCodegen,
-  SvgMesh,
-  SvgYoga,
-  SvgHive,
-  SvgList,
-  SvgPaper,
-  SvgTarget,
-  SvgRightCorner,
-  SvgPencil,
-  SvgAccountBox,
-  SvgBard,
-  SvgHonour,
-  SvgShieldFlash,
-  SvgGroup,
-  SvgApps,
-  SvgCheck,
-  InformationCircleIcon,
-  GitHubIcon,
+  SvgAccountBox as AccountBox,
+  SvgApps as AppsIcon,
+  SvgArrowIcon as ArrowIcon,
+  SvgBard as BardIcon,
+  SvgCsaStarLevelOne as CSAStarLevelOneIcon,
+  SvgCaretSlim as CaretSlimIcon,
+  SvgCheck as CheckIcon,
+  SvgClose as CloseIcon,
+  SvgCodegen as CodegenIcon,
   DiscordIcon,
-  PRODUCTS,
-  SIX_HIGHLIGHTED_PRODUCTS,
-  PRODUCTS_MENU_LIST
+  GitHubIcon,
+  SvgGroup as GroupIcon,
+  SvgHive as HiveIcon,
+  SvgHonour as HonourIcon,
+  InformationCircleIcon,
+  SvgLinkedin as LinkedInIcon,
+  SvgList as ListIcon,
+  SvgMesh as MeshIcon,
+  SvgMoon as MoonIcon,
+  SvgMore as MoreIcon,
+  SvgPaper as PaperIcon,
+  SvgPencil as PencilIcon,
+  SvgRightCorner as RightCornerIcon,
+  SvgSearch as SearchIcon,
+  SvgShare as ShareIcon,
+  SvgShieldFlash as ShieldFlashIcon,
+  SvgTarget as TargetIcon,
+  SvgTwitter as TwitterIcon,
+  SvgYoga as YogaIcon,
+  SvgYoutube as YouTubeIcon
 };

package/dist/components/image.d.mts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+import { ImageProps } from 'next/image';
+
+declare function Image(props: ImageProps): ReactElement;
+
+export { Image };

package/dist/components/image.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import NextImage from "next/image";
+function Image(props) {
+  return /* @__PURE__ */ jsx(NextImage, { placeholder: "blur", ...props });
+}
+export {
+  Image
+};

package/dist/components/index.d.mts

@@ -0,0 +1,44 @@
+export { Anchor } from './anchor.mjs';
+export { Button } from './button.mjs';
+export { CardsColorful } from './cards-colorful.mjs';
+export { FeatureList } from './feature-list.mjs';
+export { Footer } from './footer.mjs';
+export { HeroGradient } from './hero-gradient.mjs';
+export { HeroIllustration } from './hero-illustration.mjs';
+export { HeroMarketplace } from './hero-marketplace.mjs';
+export { HeroVideo } from './hero-video.mjs';
+import { FC, SVGProps } from 'react';
+export { DiscordIcon, GitHubIcon, InformationCircleIcon } from 'nextra/icons';
+export { Image } from './image.mjs';
+export { InfoList } from './info-list.mjs';
+export { LegacyPackageCmd } from './legacy-package-cmd.mjs';
+export { MarketplaceList } from './marketplace-list.mjs';
+export { MarketplaceSearch } from './marketplace-search.mjs';
+export { NPMBadge } from './npm-badge.mjs';
+export { getNavbarLogo } from './guild-navbar-logo.mjs';
+export { GetYourAPIGameRightSection } from './get-your-api-game-right-section.mjs';
+export { HiveNavigation, HiveNavigationProps } from './hive-navigation/index.mjs';
+export { HiveFooter } from './hive-footer.mjs';
+export { ToolsAndLibrariesCards } from './tools-and-libraries-cards.mjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { CallToAction, CallToActionProps } from './call-to-action.mjs';
+export { CookiesConsent, CookiesConsentProps } from './cookies-consent.mjs';
+export { Heading, HeadingProps } from './heading.mjs';
+export { InfoCard, InfoCardProps } from './info-card.mjs';
+export { Stud, StudProps } from './stud.mjs';
+export { Giscus } from './giscus.mjs';
+export { GraphQLConfCard, GraphQLConfCardProps } from './hive-navigation/graphql-conf-card.mjs';
+import '../types/components.mjs';
+import 'next/image';
+import 'next/link';
+import 'react-player';
+import '@giscus/react';
+
+declare const ReactComponent: FC<SVGProps<SVGElement>>;
+
+/**
+ * Decorations must be isolated, as clicking id links scrolls the container with overflow: hidden.
+ */
+declare function DecorationIsolation(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+export { ReactComponent as AccountBox, ReactComponent as AppsIcon, ReactComponent as ArchDecoration, ReactComponent as ArchDecorationGradientDefs, ReactComponent as ArrowIcon, ReactComponent as BardIcon, ReactComponent as CSAStarLevelOneIcon, ReactComponent as CaretSlimIcon, ReactComponent as CheckIcon, ReactComponent as CloseIcon, ReactComponent as CodegenIcon, DecorationIsolation, ReactComponent as GroupIcon, ReactComponent as HighlightDecoration, ReactComponent as HiveIcon, ReactComponent as HonourIcon, ReactComponent as LargeHiveIconDecoration, ReactComponent as LinkedInIcon, ReactComponent as ListIcon, ReactComponent as MeshIcon, ReactComponent as MoonIcon, ReactComponent as MoreIcon, ReactComponent as PaperIcon, ReactComponent as PencilIcon, ReactComponent as RightCornerIcon, ReactComponent as SearchIcon, ReactComponent as ShareIcon, ReactComponent as ShieldFlashIcon, ReactComponent as TargetIcon, ReactComponent as TwitterIcon, ReactComponent as YogaIcon, ReactComponent as YouTubeIcon };

package/dist/components/index.js

@@ -0,0 +1,52 @@
+import { Anchor } from "./anchor";
+import { Button } from "./button";
+import { CardsColorful } from "./cards-colorful";
+import { FeatureList } from "./feature-list";
+import { Footer } from "./footer";
+import { HeroGradient } from "./hero-gradient";
+import { HeroIllustration } from "./hero-illustration";
+import { HeroMarketplace } from "./hero-marketplace";
+import { HeroVideo } from "./hero-video";
+export * from "./icons";
+import { Image } from "./image";
+import { InfoList } from "./info-list";
+import { LegacyPackageCmd } from "./legacy-package-cmd";
+import { MarketplaceList } from "./marketplace-list";
+import { MarketplaceSearch } from "./marketplace-search";
+import { NPMBadge } from "./npm-badge";
+import { getNavbarLogo } from "./guild-navbar-logo";
+import { GetYourAPIGameRightSection } from "./get-your-api-game-right-section";
+import { HiveNavigation, GraphQLConfCard } from "./hive-navigation";
+import { HiveFooter } from "./hive-footer";
+import { ToolsAndLibrariesCards } from "./tools-and-libraries-cards";
+export * from "./decorations";
+export * from "./call-to-action";
+export * from "./cookies-consent";
+export * from "./heading";
+export * from "./info-card";
+export * from "./stud";
+import { Giscus } from "./giscus";
+export {
+  Anchor,
+  Button,
+  CardsColorful,
+  FeatureList,
+  Footer,
+  GetYourAPIGameRightSection,
+  Giscus,
+  GraphQLConfCard,
+  HeroGradient,
+  HeroIllustration,
+  HeroMarketplace,
+  HeroVideo,
+  HiveFooter,
+  HiveNavigation,
+  Image,
+  InfoList,
+  LegacyPackageCmd,
+  MarketplaceList,
+  MarketplaceSearch,
+  NPMBadge,
+  ToolsAndLibrariesCards,
+  getNavbarLogo
+};

package/dist/components/info-card.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface InfoCardProps extends React.HTMLAttributes<HTMLElement> {
+    icon: ReactNode;
+    heading: ReactNode;
+    as?: 'div' | 'li';
+}
+declare function InfoCard({ as: Root, icon, heading, className, children, ...rest }: InfoCardProps): react_jsx_runtime.JSX.Element;
+
+export { InfoCard, type InfoCardProps };

package/dist/components/info-card.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../cn";
+import { Stud } from "./stud";
+function InfoCard({
+  as: Root = "div",
+  icon,
+  heading,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(Root, { className: cn("bg-beige-100 p-6 md:p-12", className), ...rest, children: [
+    /* @__PURE__ */ jsx(Stud, { children: icon }),
+    /* @__PURE__ */ jsx("h3", { className: "mt-4 text-xl font-medium leading-[1.4] text-green-1000 md:mt-6", children: heading }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-green-800 md:mt-4", children })
+  ] });
+}
+export {
+  InfoCard
+};

package/dist/components/info-list.d.mts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { IInfoListProps } from '../types/components.mjs';
+import 'next/image';
+import 'next/link';
+import 'react-player';
+
+declare const InfoList: ({ title, items, className }: IInfoListProps) => ReactElement;
+
+export { InfoList };

package/dist/components/info-list.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Anchor } from "./anchor";
+const InfoList = ({ title, items, className }) => /* @__PURE__ */ jsx("section", { className: clsx("bg-white dark:bg-dark", className), children: /* @__PURE__ */ jsxs("div", { className: "container max-w-[90rem] py-12", children: [
+  title && /* @__PURE__ */ jsx("h2", { className: "mb-4 mt-0 text-2xl font-bold text-black md:text-3xl dark:text-gray-50", children: title }),
+  /* @__PURE__ */ jsx("div", { className: "flex flex-wrap", children: items.map((item, index) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "mb-9 box-border flex w-full max-w-lg flex-col pr-10 last:mb-0 md:w-1/2 lg:mb-0 lg:w-1/3",
+      children: [
+        /* @__PURE__ */ jsx("h3", { className: "m-0 text-base font-semibold text-black dark:text-gray-50", children: item.title }),
+        /* @__PURE__ */ jsx("p", { className: "mb-4 mt-2 grow text-sm text-gray-500 dark:text-gray-400", children: item.description }),
+        item.link && /* @__PURE__ */ jsx(
+          Anchor,
+          {
+            className: "mt-auto w-max text-sm text-cyan-400 hover:text-cyan-300",
+            ...item.link
+          }
+        )
+      ]
+    },
+    `info-${index}`
+  )) })
+] }) });
+export {
+  InfoList
+};

package/dist/components/legacy-package-cmd.d.mts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+
+type Command = {
+    name: string;
+    cmd: 'add' | 'run' | 'install' | 'init';
+    isNpx?: boolean;
+    isGlobal?: boolean;
+};
+declare const LegacyPackageCmd: ({ packages, }: {
+    packages: (string | Command)[];
+}) => ReactElement;
+
+export { LegacyPackageCmd };

package/dist/components/legacy-package-cmd.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Pre, Tabs } from "nextra/components";
+const PACKAGE_MANAGERS = ["yarn", "npm", "pnpm"];
+const Add = {
+  yarn: "yarn add",
+  npm: "npm install",
+  pnpm: "pnpm add"
+};
+const Run = {
+  yarn: "yarn",
+  npm: "npm run",
+  pnpm: "pnpm"
+};
+const Install = {
+  yarn: "yarn",
+  npm: "npm install",
+  pnpm: "pnpm install"
+};
+const Init = {
+  yarn: "yarn init --yes",
+  npm: "npm init --yes",
+  pnpm: "pnpm init"
+};
+const Global = {
+  yarn: "yarn global add",
+  npm: "npm install --global",
+  pnpm: "pnpm add --global"
+};
+const LegacyPackageCmd = ({
+  packages
+}) => {
+  const commands = useMemo(
+    () => PACKAGE_MANAGERS.map(
+      (pkgManager) => packages.map((pkg) => typeof pkg === "string" ? { name: pkg, cmd: "add" } : pkg).map((pkg) => {
+        switch (pkg.cmd) {
+          case "run":
+            return `${pkgManager === "npm" && pkg.isNpx ? "npx" : Run[pkgManager]} ${pkg.name}`;
+          case "install":
+            return `${Install[pkgManager]}${pkg.name ? ` ${pkg.name}` : ""}`;
+          case "init":
+            return Init[pkgManager];
+          default:
+            return `${pkg.isGlobal ? Global[pkgManager] : Add[pkgManager]} ${pkg.name}`;
+        }
+      }).join("\n")
+    ),
+    [packages]
+  );
+  return /* @__PURE__ */ jsx(Tabs, { items: PACKAGE_MANAGERS, children: PACKAGE_MANAGERS.map((pkgManager, index) => /* @__PURE__ */ jsx(Tabs.Tab, { children: /* @__PURE__ */ jsx(Pre, { "data-filename": "Terminal", "data-copy": "", "data-language": "sh", "data-theme": "default", children: /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsx("span", { className: "line", children: commands[index] }) }) }) }, pkgManager)) });
+};
+export {
+  LegacyPackageCmd
+};

package/dist/components/marketplace-list.d.mts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { IMarketplaceListProps } from '../types/components.mjs';
+import 'next/image';
+import 'next/link';
+import 'react-player';
+
+declare const MarketplaceList: ({ title, placeholder, items, pagination, className, }: IMarketplaceListProps) => ReactElement;
+
+export { MarketplaceList };