@theguild/components 7.2.0-alpha-20241101220642-0b6682d9cf4196529799e8ad0e38b83426590e93 → 8.0.0-alpha-20241103181355-82c3ab0bf3c837c17af89f22915ef2beef8f305b

package/dist/components/marketplace-list.js

@@ -0,0 +1,118 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import clsx from "clsx";
+import ReactPaginate from "react-paginate";
+import { Anchor } from "./anchor";
+import { CaretSlimIcon } from "./icons";
+import { Image } from "./image";
+import { Tag, TagsContainer } from "./tag";
+const formatDate = (value) => {
+  const months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ];
+  const date = new Date(value);
+  return `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+};
+const TableBody = ({ items = [] }) => /* @__PURE__ */ jsx("tbody", { children: items.map((item) => /* @__PURE__ */ jsxs(
+  "tr",
+  {
+    className: "border-0 border-b border-solid border-gray-300 text-xs font-medium text-gray-500 last:border-0 dark:border-gray-800 dark:text-gray-400",
+    children: [
+      /* @__PURE__ */ jsx("td", { className: "w-14 py-4 pr-2 align-top md:w-20", children: item.image && /* @__PURE__ */ jsx(Image, { ...item.image }) }),
+      /* @__PURE__ */ jsx("td", { className: "px-2 py-4", children: /* @__PURE__ */ jsxs(
+        Anchor,
+        {
+          ...item.link,
+          className: clsx(
+            "text-gray-500 duration-150 ease-in-out hover:opacity-75 dark:text-gray-400",
+            item.link.className
+          ),
+          children: [
+            /* @__PURE__ */ jsx("h3", { className: "m-0 line-clamp-2 text-base font-bold text-black md:text-lg dark:text-white", children: item.title }),
+            /* @__PURE__ */ jsx("div", { className: "line-clamp-3", children: item.description }),
+            item.tags && item.tags.length > 0 && /* @__PURE__ */ jsx(TagsContainer, { children: item.tags.map((tagName) => /* @__PURE__ */ jsx(Tag, { children: tagName }, tagName)) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("td", { className: "hidden px-2 py-4 md:table-cell", children: formatDate(item.update) }),
+      /* @__PURE__ */ jsx("td", { className: "py-4 pl-2", children: /* @__PURE__ */ jsx(
+        Anchor,
+        {
+          ...item.link,
+          className: clsx(
+            "inline-block rounded-lg bg-gray-200 p-1.5 text-gray-800 hover:invert md:p-2.5 dark:bg-gray-700 dark:text-white",
+            item.link.className
+          ),
+          children: /* @__PURE__ */ jsx(CaretSlimIcon, { className: "size-5 -rotate-90" })
+        }
+      ) })
+    ]
+  },
+  item.title
+)) });
+const MarketplaceList = ({
+  title,
+  placeholder,
+  items,
+  pagination,
+  className
+}) => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const pageSize = pagination || 5;
+  const pageCount = items ? Math.ceil(items.length / pageSize) : 1;
+  useEffect(() => {
+    setCurrentPage(0);
+  }, [items]);
+  const pages = useMemo(() => {
+    const itemsCopy = [...items];
+    const pagesData = [];
+    while (itemsCopy.length > 0) {
+      pagesData.push(itemsCopy.splice(0, pageSize));
+    }
+    return pagesData;
+  }, [items, pageSize]);
+  return /* @__PURE__ */ jsxs("section", { className: clsx("w-full bg-white dark:bg-dark", className), children: [
+    title && /* @__PURE__ */ jsx("h2", { className: "mb-4 mt-0 text-xl font-bold text-black md:text-2xl dark:text-gray-50", children: title }),
+    pages[currentPage]?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+        /* @__PURE__ */ jsx("thead", { className: "whitespace-nowrap px-2 text-left text-xs font-semibold uppercase text-gray-300 dark:text-gray-600", children: /* @__PURE__ */ jsxs("tr", { className: "border-0", children: [
+          /* @__PURE__ */ jsx("th", { className: "px-2" }),
+          /* @__PURE__ */ jsx("th", { className: "px-2", children: "Name" }),
+          /* @__PURE__ */ jsx("th", { className: "hidden px-2 md:table-cell", children: "Last Update" }),
+          /* @__PURE__ */ jsx("th", { className: "px-2" })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { items: pages[currentPage] })
+      ] }),
+      pageCount > 1 && /* @__PURE__ */ jsx(
+        ReactPaginate,
+        {
+          pageCount,
+          forcePage: currentPage,
+          pageRangeDisplayed: 3,
+          marginPagesDisplayed: 1,
+          onPageChange: (page) => setCurrentPage(page.selected),
+          containerClassName: "flex justify-center gap-x-2",
+          previousClassName: "hidden",
+          nextClassName: "hidden",
+          pageLinkClassName: "\n                text-sm\n                bg-gray-200\n                dark:text-gray-300\n                dark:bg-gray-700\n                rounded-lg\n                select-none\n                hover:opacity-70\n                transition\n                px-3.5\n                py-2\n              ",
+          activeLinkClassName: "invert"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("div", { className: "flex h-24 w-full items-center justify-center rounded-lg bg-gray-100 text-black dark:bg-gray-700 dark:text-gray-300", children: placeholder })
+  ] });
+};
+export {
+  MarketplaceList
+};

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

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { IMarketplaceSearchProps } from '../types/components.mjs';
+import 'next/image';
+import 'next/link';
+import 'react-player';
+
+declare const MarketplaceSearch: ({ title, tagsFilter, placeholder, primaryList, secondaryList, queryList, className, }: IMarketplaceSearchProps) => ReactElement;
+
+export { MarketplaceSearch };

package/dist/components/marketplace-search.js

@@ -0,0 +1,111 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement, useCallback, useMemo, useState } from "react";
+import clsx from "clsx";
+import fuzzy from "fuzzy";
+import { CloseIcon, SearchIcon } from "./icons";
+import { MarketplaceList } from "./marketplace-list";
+import { Tag, TagsContainer } from "./tag";
+const renderQueryPlaceholder = (placeholder, query) => {
+  if (!query || isValidElement(placeholder)) {
+    return placeholder;
+  }
+  const subStrings = placeholder.split("{query}");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    subStrings[0],
+    " ",
+    /* @__PURE__ */ jsxs("strong", { children: [
+      '"',
+      query,
+      '"'
+    ] }),
+    " ",
+    subStrings[1]
+  ] });
+};
+const MarketplaceSearch = ({
+  title,
+  tagsFilter,
+  placeholder,
+  primaryList,
+  secondaryList,
+  queryList,
+  className
+}) => {
+  const [query, setQuery] = useState("");
+  const handleChange = useCallback((e) => {
+    setQuery(e.currentTarget.value);
+  }, []);
+  const handleTagClick = (tagName) => {
+    if (query.includes(`#${tagName}`)) {
+      setQuery(query.replace(`#${tagName}`, "").trim());
+    } else {
+      setQuery((prev) => `${prev} #${tagName}`);
+    }
+  };
+  const items = useMemo(() => {
+    if (query && queryList) {
+      const tags = query.split(/\s+/).filter((e) => e.startsWith("#")).map((e) => e.replace("#", ""));
+      let filteredItems = queryList.items;
+      if (tags.length > 0) {
+        filteredItems = queryList.items.filter((item) => tags.every((e) => item.tags?.includes(e)));
+      }
+      const matchedResults = fuzzy.filter(
+        // Removes tags and all special characters from the query string for better fuzzy matching
+        // query
+        query.replace(/#\w+/gi, "").replace(/[^\w\s]/gi, "").trim(),
+        // Mapping the queryList items into a list of strings including the titles
+        filteredItems.map((e) => e.title)
+      ).map((e) => e.original.toLowerCase());
+      return queryList.items.filter((e) => matchedResults.includes(e.title.toLowerCase()));
+    }
+  }, [query, queryList]);
+  return /* @__PURE__ */ jsx("section", { className: clsx("bg-white dark:bg-dark", className), children: /* @__PURE__ */ jsxs("div", { className: "container max-w-[90rem] py-12", children: [
+    /* @__PURE__ */ jsx("h2", { className: "mb-4 mt-0 text-2xl font-bold text-black md:text-3xl dark:text-gray-50", children: title }),
+    tagsFilter && /* @__PURE__ */ jsx(TagsContainer, { children: tagsFilter.map((tagName) => /* @__PURE__ */ jsx(
+      Tag,
+      {
+        selected: query.includes(`#${tagName}`),
+        onClick: () => handleTagClick(tagName),
+        children: tagName
+      },
+      tagName
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex border-0 border-b border-solid border-gray-300 pb-3 dark:border-gray-800", children: [
+      /* @__PURE__ */ jsx(SearchIcon, { className: "text-gray-500 dark:text-white" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: query,
+          type: "search",
+          placeholder,
+          onChange: handleChange,
+          className: "ml-1.5 mt-0.5 w-full border-0 bg-white text-sm font-medium text-black outline-none dark:bg-dark dark:text-gray-50"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setQuery(""),
+          className: "text-gray-300 hover:text-gray-700 dark:hover:text-white",
+          children: /* @__PURE__ */ jsx(CloseIcon, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-10 py-6 lg:flex-nowrap", children: items && queryList ? /* @__PURE__ */ jsx(
+      MarketplaceList,
+      {
+        title: queryList.title,
+        items,
+        placeholder: renderQueryPlaceholder(queryList.placeholder, query),
+        pagination: queryList.pagination
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(MarketplaceList, { ...primaryList }),
+      secondaryList && /* @__PURE__ */ jsx(MarketplaceList, { ...secondaryList })
+    ] }) })
+  ] }) });
+};
+export {
+  MarketplaceSearch
+};

package/dist/components/npm-badge.d.mts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+
+declare const NPMBadge: ({ name }: {
+    name: string;
+}) => ReactElement;
+
+export { NPMBadge };

package/dist/components/npm-badge.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Anchor } from "./anchor";
+const NPMBadge = ({ name }) => {
+  const encodedPackage = encodeURIComponent(name);
+  return /* @__PURE__ */ jsx(Anchor, { href: `https://npmjs.com/package/${encodedPackage}`, newWindow: true, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: `https://badge.fury.io/js/${encodedPackage}.svg`,
+      alt: "npm version",
+      className: "h-6"
+    }
+  ) });
+};
+export {
+  NPMBadge
+};

package/dist/components/schema-type.d.mts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { ISchemaPageProps } from '../types/components.mjs';
+import 'next/image';
+import 'next/link';
+import 'react-player';
+
+declare const SchemaPage: ({ schemaName, tags, editorData, }: ISchemaPageProps) => ReactElement;
+
+export { SchemaPage };

package/dist/components/schema-type.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { useState } from "react";
+import { buildSchema } from "graphql";
+import { ExecutableDocumentEditor, SchemaEditor } from "@theguild/editor";
+import { CaretSlimIcon, MoreIcon, ShareIcon } from "./icons";
+import { Image } from "./image";
+import { Tag, TagsContainer } from "./tag";
+const Editor = ({
+  title,
+  frameworks = [],
+  image,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-full max-w-full pr-px lg:min-w-[25%] lg:max-w-[25%]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-[85px] items-center justify-between bg-gray-100 p-3.5 dark:bg-transparent", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+        image && /* @__PURE__ */ jsx(Image, { src: image, alt: "logo", className: "size-14" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          title && /* @__PURE__ */ jsx("p", { className: "text-sm dark:text-gray-50", children: title }),
+          frameworks.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-sm dark:text-gray-50", children: frameworks.map((name) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "before:mx-1.5 before:content-['\u2022'] before:first-of-type:hidden",
+              children: name
+            },
+            name
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(CaretSlimIcon, { className: "size-4" }) })
+    ] }),
+    children
+  ] });
+};
+const Button = ({ children }) => {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "rounded-md bg-gray-300 p-3 text-black transition hover:opacity-70",
+      children
+    }
+  );
+};
+const SchemaPage = ({
+  schemaName,
+  tags = [],
+  editorData
+}) => {
+  const [schemaObj, setSchemaObj] = useState(() => buildSchema(editorData[0].schema));
+  return /* @__PURE__ */ jsxs("section", { className: "w-full bg-white dark:bg-dark", children: [
+    /* @__PURE__ */ jsxs("div", { className: "container flex max-w-[90rem] flex-col justify-between py-6 md:flex-row md:gap-16", children: [
+      /* @__PURE__ */ jsxs("span", { className: "pb-6 md:pb-0", children: [
+        /* @__PURE__ */ jsx("h2", { className: "mb-4 mt-0 text-xl font-bold text-black md:text-2xl dark:text-gray-50", children: schemaName }),
+        /* @__PURE__ */ jsx(TagsContainer, { children: tags.map((tagName) => /* @__PURE__ */ jsx(Tag, { children: tagName }, tagName)) })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "flex items-start gap-2.5", children: [
+        /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(ShareIcon, {}) }),
+        /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(MoreIcon, {}) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx(Editor, { ...editorData[0], children: /* @__PURE__ */ jsx(
+        SchemaEditor,
+        {
+          schema: editorData[0].schema,
+          onSchemaChange: (newSchemaObject) => {
+            setSchemaObj(newSchemaObject);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Editor, { ...editorData[1], children: /* @__PURE__ */ jsx(ExecutableDocumentEditor, { schema: schemaObj, defaultValue: editorData[1].operations }) }),
+      editorData.slice(2).map((data) => /* @__PURE__ */ createElement(Editor, { ...data, key: data.title }, /* @__PURE__ */ jsx(SchemaEditor, { schema: data.schema })))
+    ] })
+  ] });
+};
+export {
+  SchemaPage
+};

package/dist/components/stud.d.mts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface StudProps extends React.HTMLAttributes<HTMLElement> {
+}
+declare function Stud(props: StudProps): react_jsx_runtime.JSX.Element;
+
+export { Stud, type StudProps };

package/dist/components/stud.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../cn";
+function Stud(props) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cn(
+        "w-fit rounded-lg bg-[linear-gradient(135deg,#68A8B6,#3B736A)] p-[9px] text-white",
+        props.className
+      )
+    }
+  );
+}
+export {
+  Stud
+};

package/dist/components/tag.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ReactElement } from 'react';
+
+declare const Tag: ({ children, selected, onClick, }: {
+    children: ReactNode;
+    selected?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}) => react_jsx_runtime.JSX.Element;
+declare const TagsContainer: ({ children }: {
+    children: ReactNode;
+}) => ReactElement;
+
+export { Tag, TagsContainer };

package/dist/components/tag.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const Tag = ({
+  children,
+  selected,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: clsx(
+        "mb-2 mr-2 inline cursor-pointer rounded-md border-0 px-2 py-1 text-xs outline-none",
+        selected ? "bg-gray-400 text-gray-700" : "bg-gray-200 text-gray-500"
+      ),
+      onClick,
+      children
+    }
+  );
+};
+const TagsContainer = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap py-2", children });
+};
+export {
+  Tag,
+  TagsContainer
+};

package/dist/components/theme-switcher.d.mts

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from 'react';
+
+declare const ThemeSwitcherButton: FC<{
+    children: ReactNode;
+}>;
+
+export { ThemeSwitcherButton };

package/dist/components/theme-switcher.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "nextra-theme-docs";
+const ThemeSwitcherButton = ({ children }) => {
+  const { resolvedTheme, setTheme } = useTheme();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => setTheme(resolvedTheme === "light" ? "dark" : "light"),
+      className: "self-center rounded-sm p-2 outline-none focus-visible:ring",
+      children
+    }
+  );
+};
+export {
+  ThemeSwitcherButton
+};

package/dist/components/tools-and-libraries-cards.d.mts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function ToolsAndLibrariesCards({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { ToolsAndLibrariesCards };