@catalystsoftware/ui 1.0.12 → 1.0.15

package/dist/components/catalyst-ui/utils/dynamic-links.tsx

@@ -0,0 +1,324 @@
+import { useLocation, useMatches } from "@remix-run/react";
+import type { AppData, LinkDescriptor } from "@remix-run/server-runtime";
+import { HandleConventionArguments } from "./handle-conventions";
+
+export interface DynamicLinksFunction<Data extends AppData = AppData> {
+  (args: HandleConventionArguments<Data>): LinkDescriptor[];
+}
+
+export function DynamicLinks() {
+  let location = useLocation();
+
+  let links: LinkDescriptor[] = useMatches().flatMap(
+    (match, index, matches) => {
+      let fn = match.handle?.dynamicLinks as DynamicLinksFunction | undefined;
+      if (typeof fn !== "function") return [];
+      let result = fn({
+        id: match.id,
+        data: match.data,
+        params: match.params,
+        location,
+        parentsData: matches.slice(0, index).map((match) => match.data),
+        matches,
+      });
+      if (Array.isArray(result)) return result;
+      return [];
+    }
+  );
+
+  return (
+    <>
+      {links.map((link) => (
+        <link {...link} key={link.integrity || JSON.stringify(link)} />
+      ))}
+    </>
+  );
+}
+
+const blogPostData = {
+    user: {
+        avatar: '/images/john-doe.jpg'
+    },
+    language: 'en',
+    title: 'Understanding Dynamic Links in Remix'
+};
+const productData = {
+    user: null,
+    product: {
+        image: '/images/product-hero.jpg',
+        price: 99.99
+    }
+};
+export function DynamicLinksDemo() {
+    const handleBlogPost = {
+        dynamicLinks: ({ data, location }) => {
+            const links = [];
+
+            // Add canonical URL
+            links.push({
+                rel: "canonical",
+                href: `https://example.com${location.pathname}`,
+            });
+
+            // Add alternate languages if needed
+            if (data?.language) {
+                links.push({
+                    rel: "alternate",
+                    hrefLang: "es",
+                    href: `https://example.com/es${location.pathname}`,
+                });
+            }
+
+            // Preload user avatar if user exists
+            if (data?.user) {
+                links.push({
+                    rel: "preload",
+                    href: data.user.avatar,
+                    as: "image"
+                });
+            }
+
+            return links;
+        }
+    };
+
+    const handleProduct = {
+        DynamicLinks: ({ data, location }) => {
+            const links = [];
+
+            // Add canonical URL
+            links.push({
+                rel: "canonical",
+                href: `https://example.com${location.pathname}`,
+            });
+
+            // Preload product image
+            if (data?.product?.image) {
+                links.push({
+                    rel: "preload",
+                    href: data.product.image,
+                    as: "image"
+                });
+            }
+
+            // Add pricing schema
+            if (data?.product?.price) {
+                links.push({
+                    rel: "alternate",
+                    type: "application/ld+json",
+                    href: `https://example.com/api/schema/product${location.pathname}`
+                });
+            }
+
+            return links;
+        }
+    };
+
+    // Simulate generated links
+    const blogLinks = handleBlogPost.dynamicLinks({
+        data: blogPostData,
+        location: { pathname: '/blog/dynamic-links' }
+    });
+
+    const productLinks = handleProduct.dynamicLinks({
+        data: productData,
+        location: { pathname: '/products/awesome-widget' }
+    });
+
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-gray-50">
+            <div className="space-y-8 w-full max-w-4xl px-4">
+                <div className="text-center mb-8">
+                    <h1 className="text-3xl font-bold text-gray-900 mb-4">Dynamic Links Demo</h1>
+                    <p className="text-gray-600">See how different route handlers generate dynamic link tags</p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    {/* Blog Post Route */}
+                    <div className="bg-white rounded-lg border p-6">
+                        <h3 className="text-xl font-semibold mb-4 text-blue-600">Blog Post Route</h3>
+                        <div className="mb-4">
+                            <span className="text-sm font-medium text-gray-500">Route:</span>
+                            <code className="ml-2 bg-gray-100 px-2 py-1 rounded text-sm">/blog/dynamic-links</code>
+                        </div>
+
+                        <div className="mb-4">
+                            <h4 className="font-medium text-gray-700 mb-2">Generated Links:</h4>
+                            <div className="space-y-2">
+                                {blogLinks.map((link, index) => (
+                                    <div key={index} className="bg-gray-50 p-3 rounded text-sm font-mono">
+                                        &lt;link {Object.entries(link).map(([key, value]) =>
+                                            `${key}="${value}"`
+                                        ).join(' ')} /&gt;
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        <div className="text-sm text-gray-600">
+                            <strong>Features:</strong> Canonical URL, language alternates, user avatar preload
+                        </div>
+                    </div>
+
+                    {/* Product Route */}
+                    <div className="bg-white rounded-lg border p-6">
+                        <h3 className="text-xl font-semibold mb-4 text-green-600">Product Route</h3>
+                        <div className="mb-4">
+                            <span className="text-sm font-medium text-gray-500">Route:</span>
+                            <code className="ml-2 bg-gray-100 px-2 py-1 rounded text-sm">/products/awesome-widget</code>
+                        </div>
+
+                        <div className="mb-4">
+                            <h4 className="font-medium text-gray-700 mb-2">Generated Links:</h4>
+                            <div className="space-y-2">
+                                {productLinks.map((link, index) => (
+                                    <div key={index} className="bg-gray-50 p-3 rounded text-sm font-mono">
+                                        &lt;link {Object.entries(link).map(([key, value]) =>
+                                            `${key}="${value}"`
+                                        ).join(' ')} /&gt;
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        <div className="text-sm text-gray-600">
+                            <strong>Features:</strong> Canonical URL, product image preload, schema markup
+                        </div>
+                    </div>
+                </div>
+
+                {/* Usage Example */}
+                <div className="bg-white rounded-lg border p-6">
+                    <h3 className="text-xl font-semibold mb-4 text-purple-600">Usage in Root Component</h3>
+                    <div className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
+                        <pre className="text-sm">{`<html>
+  <head>
+    <Meta />
+    <DynamicLinks />
+    <Links />
+  </head>
+  <body>
+    <Outlet />
+  </body>
+</html>`}</pre>
+                    </div>
+                    <p className="text-sm text-gray-600 mt-3">
+                        The DynamicLinks component automatically renders all dynamic link tags from active routes
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// Demo Usage
+// 1. First, define dynamic links in your route handle
+export const handle = {
+  dynamicLinks: ({ data, location }) => {
+    const links = [];
+    
+    // Add canonical URL
+    links.push({
+      rel: "canonical",
+      href: `https://example.com${location.pathname}`,
+    });
+    
+    // Add alternate languages if needed
+    if (data?.language) {
+      links.push({
+        rel: "alternate",
+        hrefLang: "es",
+        href: `https://example.com/es${location.pathname}`,
+      });
+    }
+    
+    return links;
+  }
+};
+
+// 2. Use the DynamicLinks component in your root component
+function Root() {
+  return (
+    <html>
+      <head>
+        <DynamicLinks />
+        {/* other head elements */}
+      </head>
+      <body>
+        {/* your app content */}
+      </body>
+    </html>
+  );
+}
+
+
+// Warning: Deprecated in favor of the V2_MetaFunction. This will be removed in the next major version. Check below for the new way to do this.
+
+// If you need to create <link /> tags based on the loader data instead of being static, you can use the DynamicLinks component together with the DynamicLinksFunction type.
+
+// In the route you want to define dynamic links add handle export with a dynamicLinks method, this method should implement the DynamicLinksFunction type.
+
+// create the dynamicLinks function with the correct type
+// note: loader type is optional
+/**
+ * let dynamicLinks: DynamicLinksFunction<SerializeFrom<typeof loader>> = ({
+  id,
+  data,
+  params,
+  matches,
+  location,
+  parentsData,
+}) => {
+  if (!data.user) return [];
+  return [{ rel: "preload", href: data.user.avatar, as: "image" }];
+};
+ */
+
+// and export it through the handle, you could also create it inline here
+// if you don't care about the type
+// export let handle = { dynamicLinks };
+// Then, in the root route, add the DynamicLinks component before the Remix's Links component, usually inside a Document component.
+
+// import { Links, LiveReload, Meta, Scripts, ScrollRestoration } from "remix";
+// import { DynamicLinks } from '~/components/catalyst-ui'
+
+// type Props = { children: React.ReactNode; title?: string };
+
+export function Document({ children, title }: Props) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        {title ? <title>{title}</title> : null}
+        <Meta />
+        <DynamicLinks />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+// Now, any link you defined in the DynamicLinksFunction will be added to the HTML as any static link in your LinksFunctions.
+
+// Note You can also put the DynamicLinks after the Links component, it's up to you what to prioritize, since static links are probably prefetched when you do <Link prefetch> you may want to put the DynamicLinks first to prioritize them.
+
+// If you want to upgrade to use the V2_MetaFunction, first enable it in your Remix app:
+
+/** @type {import('@remix-run/dev').AppConfig} */
+// module.exports = {
+//   future: { v2_meta: true },
+// };
+// Then you can use it like this:
+
+export let meta: V2_MetaFunction<typeof loader> = ({ data }) => {
+  if (!data.user) return [];
+  return [
+    { tagName: "link", rel: "preload", href: data.user.avatar, as: "image" },
+  ];
+};

package/dist/components/catalyst-ui/utils/event-stream.ts

@@ -0,0 +1,82 @@
+interface SendFunctionArgs {
+	event?: string;
+	id?: string;
+	data: string;
+}
+
+type SendFunction = (args: SendFunctionArgs) => void;
+
+type CleanupFunction = () => void;
+
+type AbortFunction = () => void;
+
+type InitFunction = (
+	send: SendFunction,
+	abort: AbortFunction,
+) => CleanupFunction;
+
+export function eventStream(
+	signal: AbortSignal,
+	init: InitFunction,
+	options: ResponseInit = {},
+	strategy?: QueuingStrategy,
+) {
+	let stream = new ReadableStream(
+		{
+			start(controller) {
+				let encoder = new TextEncoder();
+				let closed = false;
+
+				function send({ event = "message", data, id }: SendFunctionArgs) {
+					if (closed) return; // If already closed, not enqueue anything
+					if (id) controller.enqueue(encoder.encode(`id: ${id}\n`));
+					controller.enqueue(encoder.encode(`event: ${event}\n`));
+
+					if (closed) return; // If already closed, not enqueue anything
+
+					data.split("\n").forEach((line, index, array) => {
+						if (closed) return; // If already closed, not enqueue anything
+						let value = `data: ${line}\n`;
+						if (index === array.length - 1) value += "\n";
+						controller.enqueue(encoder.encode(value));
+					});
+				}
+
+				let cleanup = init(send, close);
+
+				function close() {
+					if (closed) return;
+					cleanup();
+					closed = true;
+					signal.removeEventListener("abort", close);
+					controller.close();
+				}
+
+				signal.addEventListener("abort", close);
+
+				if (signal.aborted) return close();
+			},
+		},
+		strategy,
+	);
+
+	let headers = new Headers(options.headers);
+
+	if (headers.has("Content-Type")) {
+		console.warn("Overriding Content-Type header to `text/event-stream`");
+	}
+
+	if (headers.has("Cache-Control")) {
+		console.warn("Overriding Cache-Control header to `no-cache`");
+	}
+
+	if (headers.has("Connection")) {
+		console.warn("Overriding Connection header to `keep-alive`");
+	}
+
+	headers.set("Content-Type", "text/event-stream");
+	headers.set("Cache-Control", "no-cache");
+	headers.set("Connection", "keep-alive");
+
+	return new Response(stream, { headers });
+}

package/dist/components/catalyst-ui/utils/existing-search-params.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { useSearchParams } from "@remix-run/react";
+
+type Props = {
+	exclude?: Array<string | undefined>;
+} & Omit<
+	React.InputHTMLAttributes<HTMLInputElement>,
+	"name" | "value" | "type" | "id"
+>;
+
+export function ExistingSearchParams({ exclude, ...props }: Props) {
+	const [searchParams] = useSearchParams();
+	const existingSearchParams = [...searchParams.entries()].filter(
+		([key]) => !exclude?.includes(key),
+	);
+
+	return (
+		<>
+			{existingSearchParams.map(([key, value]) => {
+				return (
+					<input
+						key={`${key}=${value}`}
+						{...props}
+						type="hidden"
+						name={key}
+						value={value}
+					/>
+				);
+			})}
+		</>
+	);
+}
+// Demo Usage
+// import { ExistingSearchParams } from "~/components/catalyst-ui";
+
+// Basic usage - preserves all current search params
+
+// Usage with URL: /search?q=test&category=books&sort=newest&page=2
+// The ExistingSearchParams component would render hidden inputs for all current params
+// excluding any specified in the exclude prop, allowing you to modify some params
+// while preserving others in the form submission
+
+// import { ExistingSearchParams } from '~/components/catalyst-ui'
+
+// Note
+
+// This depends on react and react-router
+
+// When you submit a GET form, the browser will replace all of the search params in the URL with your form data. This component copies existing search params into hidden inputs so they will not be overwritten.
+
+// The exclude prop accepts an array of search params to exclude from the hidden inputs
+
+// add params handled by this form to this list
+// add params from other forms you want to clear on submit
+// For example, imagine a table of data with separate form components for pagination and filtering and searching. Changing the page number should not affect the search or filter params.
+/**
+ * <Form>
+  <ExistingSearchParams exclude={["page"]} />
+  <button type="submit" name="page" value="1">
+	1
+  </button>
+  <button type="submit" name="page" value="2">
+	2
+  </button>
+  <button type="submit" name="page" value="3">
+	3
+  </button>
+</Form>
+ */
+
+// By excluding the page param, from the search form, the user will return to the first page of search result.
+/** 
+ * <Form>
+  <ExistingSearchParams exclude={["q", "page"]} />
+  <input type="search" name="q" />
+  <button type="submit">Search</button>
+</Form>
+ */

package/dist/components/catalyst-ui/utils/external-scripts.tsx

@@ -0,0 +1,144 @@
+import * as React from "react";
+import { useLocation, useMatches } from "@remix-run/react";
+import type { HandleConventionArguments } from "./handle-conventions.js";
+import { useHydrated } from "../hooks/use-hydrated.js";
+
+export type ReferrerPolicy =
+	| "no-referrer-when-downgrade"
+	| "no-referrer"
+	| "origin-when-cross-origin"
+	| "origin"
+	| "same-origin"
+	| "strict-origin-when-cross-origin"
+	| "strict-origin"
+	| "unsafe-url";
+
+export type CrossOrigin = "anonymous" | "use-credentials";
+
+export type ScriptType = "module" | "text/javascript";
+
+export type ScriptDescriptor = {
+	preload?: boolean;
+	async?: boolean;
+	crossOrigin?: CrossOrigin;
+	defer?: boolean;
+	integrity?: string;
+	noModule?: boolean;
+	nonce?: string;
+	referrerPolicy?: ReferrerPolicy;
+	src: string;
+	type?: ScriptType;
+	id?: string;
+};
+
+export type ExternalScriptsFunction<Loader = unknown> = (
+	args: HandleConventionArguments<Loader>,
+) => ScriptDescriptor[];
+
+
+export interface ExternalScriptsHandle<Data = unknown> {
+	scripts?: ExternalScriptsFunction<Data> | ScriptDescriptor[];
+}
+
+
+export function ExternalScripts() {
+	let scripts = useExternalScripts();
+
+	return (
+		<>
+			{scripts.map((props) => {
+				return <ExternalScript key={props.src} {...props} />;
+			})}
+		</>
+	);
+}
+
+
+
+export function ExternalScript({
+	src,
+	preload = false,
+	async = true,
+	defer = true,
+	crossOrigin,
+	integrity,
+	type,
+	referrerPolicy,
+	noModule,
+	nonce,
+	id,
+}: ScriptDescriptor) {
+	let isHydrated = useHydrated();
+	let startsHydrated = React.useRef(isHydrated);
+
+	React.useEffect(() => {
+		if (!startsHydrated.current && isHydrated) return;
+
+		let $script = document.createElement("script");
+		$script.src = src;
+
+		let attributes = {
+			async,
+			defer,
+			crossOrigin,
+			integrity,
+			type,
+			referrerPolicy,
+			noModule,
+			nonce,
+			id,
+		};
+
+		for (let [key, value] of Object.entries(attributes)) {
+			if (value) $script.setAttribute(key, value.toString());
+		}
+
+		document.body.appendChild($script);
+
+		return () => $script.remove();
+	}, [
+		async,
+		crossOrigin,
+		defer,
+		integrity,
+		isHydrated,
+		noModule,
+		nonce,
+		referrerPolicy,
+		src,
+		type,
+		id,
+	]);
+
+	if (startsHydrated.current && isHydrated) return null;
+
+	let rel = noModule ? "modulepreload" : "preload";
+	let as = noModule ? undefined : "script";
+
+	return (
+		<>
+			{preload && (
+				<link
+					rel={rel}
+					href={src}
+					as={as}
+					crossOrigin={crossOrigin}
+					integrity={integrity}
+					referrerPolicy={referrerPolicy}
+				/>
+			)}
+			<script
+				id={id}
+				src={src}
+				defer={defer}
+				async={async}
+				type={type}
+				noModule={noModule}
+				nonce={nonce}
+				crossOrigin={crossOrigin}
+				integrity={integrity}
+				referrerPolicy={referrerPolicy}
+			/>
+		</>
+	);
+}

package/dist/components/catalyst-ui/utils/fetcher-context.tsx

@@ -0,0 +1,45 @@
+
+import { createContext, useContext, ReactNode } from 'react'
+import { useFetcher, FetcherWithComponents } from '@remix-run/react'
+
+// Define the context type
+interface FetcherContextType {
+  fetcher: FetcherWithComponents<any>
+  isLoading: boolean
+  error: string | null
+  data: any
+}
+
+// Create the context
+const FetcherContext = createContext<FetcherContextType | null>(null)
+
+// Provider component
+interface FetcherProviderProps {
+  children: ReactNode
+  fetcherKey?: string // Optional key for multiple fetchers
+}
+
+export function FetcherProvider({ children, fetcherKey }: FetcherProviderProps) {
+  const fetcher = useFetcher({ key: fetcherKey })
+  
+  const isLoading = fetcher.state === 'loading' || fetcher.state === 'submitting'
+  const error = fetcher.data?.error || null
+  const data = fetcher.data
+
+  return (
+    <FetcherContext.Provider value={{ fetcher, isLoading, error, data }}>
+      {children}
+    </FetcherContext.Provider>
+  )
+}
+
+// Hook to use the fetcher context
+export function useFetcherContext() {
+  const context = useContext(FetcherContext)
+  
+  if (!context) {
+    throw new Error('useFetcherContext must be used within a FetcherProvider')
+  }
+  
+  return context
+}