keystone-design-bootstrap 1.0.3

package/src/design_system/sections/testimonials-home.aman.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { PhotoWithFallback } from '../elements';
+import type { Testimonial } from '../../types/api/testimonial';
+import { getAvatarUrl } from '../../utils/photo-helpers';
+
+interface TestimonialsHomeProps {
+    config: {
+        pages?: any[];
+    };
+    testimonials?: Testimonial[] | null;
+    pageName?: string;
+    sectionKey?: string;
+}
+
+export const TestimonialsHome = ({
+    config,
+    testimonials: testimonialsData,
+    pageName = 'Home',
+    sectionKey = 'home_page_section_4_testimonials',
+}: TestimonialsHomeProps) => {
+    const testimonials = Array.isArray(testimonialsData) ? testimonialsData : [];
+    
+    const testimonialsSection = pageName === 'Home' 
+    const title = 'What our clients say';
+    
+    const perPage = undefined;
+    const displayTestimonials = perPage ? testimonials.slice(0, perPage) : testimonials.slice(0, 3);
+
+    return (
+        <section>
+            <div className="mx-auto max-w-container px-4 md:px-8">
+                <div className="mb-12 text-center">
+                    <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+                        {title}
+                    </h2>
+                </div>
+
+                {displayTestimonials && displayTestimonials.length > 0 ? (
+                    <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+                        {displayTestimonials.map((testimonial: any, i: number) => {
+                            const quote = testimonial.content_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
+                            const reviewerName = testimonial.reviewer_name || 'Customer';
+                            const username = `@${reviewerName.toLowerCase().replace(/\s+/g, '')}`;
+                            const avatarUrl = getAvatarUrl(testimonial.photo_attachments, testimonial.id, reviewerName);
+                            const rating = testimonial.rating || 5;
+                            const isVerified = testimonial.is_verified !== false;
+                            
+                            return (
+                                <div
+                                    key={testimonial.id || i}
+                                    className="bg-white p-8 flex flex-col"
+                                >
+                                    <div className="flex gap-1 mb-6">
+                                        {Array.from({ length: 5 }).map((_, starIdx) => (
+                                            <svg
+                                                key={starIdx}
+                                                className="w-5 h-5"
+                                                style={{
+                                                    fill: starIdx < rating ? "var(--color-text-brand-secondary)" : "none",
+                                                    stroke: starIdx < rating ? "none" : "#E5E0D8"
+                                                }}
+                                                strokeWidth="2"
+                                                viewBox="0 0 24 24"
+                                            >
+                                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                                            </svg>
+                                        ))}
+                                    </div>
+
+                                    <p className="font-display text-lg leading-relaxed text-tertiary mb-6 flex-grow">
+                                        "{quote}"
+                                    </p>
+
+                                    <div className="flex items-center gap-3">
+                                        <div className="w-12 h-12 rounded-full overflow-hidden flex-shrink-0">
+                                            <PhotoWithFallback
+                                                photoUrl={avatarUrl}
+                                                photoAlt={reviewerName}
+                                                fallbackId={testimonial.id || i}
+                                                className="w-full h-full object-cover"
+                                            />
+                                        </div>
+                                        <div className="flex-1">
+                                            <div className="flex items-center gap-1.5">
+                                                <p className="font-body text-sm font-medium text-fg-primary">
+                                                    {reviewerName}
+                                                </p>
+                                                {isVerified && (
+                                                    <svg className="w-4 h-4 text-fg-primary" viewBox="0 0 20 20" fill="currentColor">
+                                                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clipRule="evenodd" />
+                                                    </svg>
+                                                )}
+                                            </div>
+                                            <p className="font-body text-xs" style={{ color: 'var(--color-text-brand-secondary)' }}>{username}</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                ) : (
+                    <div className="text-center py-12">
+                        <p className="font-body text-base text-tertiary">No testimonials available</p>
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('testimonials-home', 'aman', TestimonialsHome);

package/src/design_system/sections/testimonials-home.tsx

@@ -0,0 +1,90 @@
+import { StarIcon, AvatarLabelGroup, VerifiedTick } from '../elements';
+import { getAvatarUrl } from '../../utils/photo-helpers';
+import type { Testimonial } from '../../types/api/testimonial';
+
+
+interface TestimonialsHomeProps {
+    config: {
+        pages?: any[];
+    };
+    testimonials: Testimonial[];
+    pageName?: string;
+    sectionKey?: string;
+}
+
+export const TestimonialsHome = ({
+    config,
+    testimonials: testimonialsData,
+    pageName = 'Home',
+    sectionKey = 'home_page_section_4_testimonials',
+}: TestimonialsHomeProps) => {
+    const testimonials = Array.isArray(testimonialsData) ? testimonialsData : [];
+    
+    // Extract values from config
+    const testimonialsSection = pageName === 'Home' 
+    const title = "What our customers say";
+    const subtitle = "";
+    
+    const perPage = undefined;
+    const displayTestimonials = perPage ? testimonials.slice(0, perPage) : testimonials;
+
+    return (
+        <section className="flex flex-col items-center gap-16 bg-primary py-16 lg:py-24">
+            <div className="flex max-w-container flex-col items-center gap-4 px-4 text-center lg:gap-5 lg:px-8">
+                <h1 className="text-display-sm font-semibold text-primary lg:text-display-md">
+                    {title}
+                </h1>
+                <p className="text-lg text-tertiary lg:text-xl">
+                    {subtitle}
+                </p>
+            </div>
+            
+            {displayTestimonials && displayTestimonials.length > 0 ? (
+                <div className="grid max-w-container grid-cols-1 gap-5 px-4 lg:grid-cols-3 lg:gap-6 lg:px-8">
+                    {displayTestimonials.map((testimonial, index) => {
+                        const reviewerName = testimonial.reviewer_name || 'Customer';
+                        const quote = testimonial.content_markdown?.replace(/[#*\[\]()]/g, '').trim() || '';
+                        const username = `@${reviewerName.toLowerCase().replace(/\s+/g, '')}`;
+                        const avatarUrl = getAvatarUrl(testimonial.photo_attachments, testimonial.id, reviewerName);
+                        
+                        return (
+                            <div 
+                                key={testimonial.id || index} 
+                                className="flex flex-col items-start gap-8 rounded-xl bg-secondary p-6 lg:justify-between lg:p-8"
+                            >
+                                <div className="flex flex-col items-start gap-4">
+                                    <div aria-hidden="true" className="flex gap-1">
+                                        <StarIcon />
+                                        <StarIcon />
+                                        <StarIcon />
+                                        <StarIcon />
+                                        <StarIcon />
+                                    </div>
+                                    <blockquote className="text-md font-medium text-primary">{quote}</blockquote>
+                                </div>
+                                <a href="#" className="group flex outline-hidden">
+                                    <AvatarLabelGroup
+                                        size="lg"
+                                        src={avatarUrl}
+                                        alt={reviewerName}
+                                        title={
+                                            <span className="relative flex items-center gap-1">
+                                                {reviewerName}
+                                                <VerifiedTick size="lg" />
+                                            </span>
+                                        }
+                                        subtitle={<span className="underline decoration-1 underline-offset-4">{username}</span>}
+                                    />
+                                </a>
+                            </div>
+                        );
+                    })}
+                </div>
+            ) : (
+                <div className="text-center">
+                    <p className="text-gray-500">No testimonials available</p>
+                </div>
+            )}
+        </section>
+    );
+};

package/src/design_system/sections/values-section.aman.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import type { FC } from 'react';
+import { mapIcon } from '../utils/icon-mapping';
+
+interface ValuesSectionProps {
+  config: {
+    pages?: any[];
+  };
+  pageName?: string;
+  sectionKey?: string;
+}
+
+export const ValuesSection = ({
+  config,
+  pageName = 'About',
+  sectionKey = 'about_page_section_3_values',
+}: ValuesSectionProps) => {
+  const title = 'Our Values';
+  const subtitle = '';
+  const values: any[] = [];
+
+  // Check if any icons are missing - if so, use stars for all
+  const anyIconMissing = values.some((value: any) => value.icon && !mapIcon(value.icon));
+  const useStarForAll = anyIconMissing;
+
+  return (
+    <section>
+      <div className="mx-auto max-w-container px-4 md:px-8">
+        <div className="mb-12 text-center">
+          {subtitle && (
+            <p className="text-xs font-body font-normal uppercase tracking-widest mb-4" style={{ color: 'var(--color-text-brand-secondary)' }}>
+              {subtitle}
+            </p>
+          )}
+          <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
+            {title}
+          </h2>
+        </div>
+
+        <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
+          {values.map((value: any, i: number) => {
+            // Use star for all if any icon is missing, otherwise use the specified icon
+            const IconComponent = useStarForAll ? mapIcon('star') : (mapIcon(value.icon) || mapIcon('star'));
+            
+            return (
+              <div key={i} className="text-center">
+                {IconComponent && (
+                  <div className="mb-6 flex justify-center">
+                    <div className="w-12 h-12 flex items-center justify-center text-fg-primary">
+                      <IconComponent className="w-full h-full" />
+                    </div>
+                  </div>
+                )}
+                <h3 className="font-display text-2xl font-normal text-fg-primary mb-4">
+                  {value.title}
+                </h3>
+                {value.description && (
+                  <p className="font-body text-base leading-relaxed text-tertiary">
+                    {value.description}
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('values-section', 'aman', ValuesSection);

package/src/design_system/sections/values-section.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import React from 'react';
+import type { FC } from 'react';
+import { FeaturedIcon } from '../elements';
+import { mapIcon } from '../utils/icon-mapping';
+
+type FeaturedIconColor = "success" | "gray" | "brand" | "error" | "warning";
+
+
+interface ValuesSectionProps {
+    // Config data - component extracts all values from it
+    config: {
+        pages?: any[];
+    };
+    // Optional: page name and section key (defaults to Home page)
+    pageName?: string;
+    sectionKey?: string;
+}
+
+export const ValuesSection = ({
+    config,
+    pageName = 'Home',
+    sectionKey = 'home_page_section_3_about',
+}: ValuesSectionProps) => {
+    // Extract values from config
+    const aboutSection = pageName === 'Home' 
+    const values = (undefined || []).map((value: any) => ({
+        title: value.title,
+        description: value.description,
+        icon: value.icon,
+        color: value.color,
+    }));
+    const hasValues = values.length > 0;
+    
+    // Only show label if there are values or if explicitly provided
+    const label = hasValues 
+        ? ("Our values")
+        : (undefined || null);
+    const title = "How we work";
+    const subtitle = "Our shared values keep us connected and guide us as one team.";
+    const description = undefined; // For sections without values
+    
+    const backgroundColor = "bg-secondary";
+    const className = "";
+    return (
+        <section className={`${backgroundColor} py-16 md:py-24 ${className}`}>
+            <div className="mx-auto w-full max-w-container px-4 md:px-8">
+                <div className="mx-auto flex w-full max-w-3xl flex-col items-center text-center">
+                    {label && (
+                        <span className="text-sm font-semibold text-brand-secondary md:text-md">{label}</span>
+                    )}
+                    {title && (
+                        <h2 className={`${label ? 'mt-3' : ''} text-display-sm font-semibold text-primary md:text-display-md`}>
+                            {title}
+                        </h2>
+                    )}
+                    {subtitle && (
+                        <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
+                            {subtitle}
+                        </p>
+                    )}
+                    {description && !hasValues && (
+                        <p className="mt-4 text-md text-tertiary md:mt-6 md:text-lg">
+                            {description}
+                        </p>
+                    )}
+                </div>
+
+                {values.length > 0 ? (
+                    <div className="mt-12 md:mt-16">
+                        {(() => {
+                            // Check if any icons are missing - if so, use stars for all
+                            const anyIconMissing = values.some((value: { icon?: string | FC<{ className?: string }> }) => 
+                                typeof value.icon === 'string' && value.icon && !mapIcon(value.icon)
+                            );
+                            const useStarForAll = anyIconMissing;
+
+                            return (
+                                <ul className="grid w-full grid-cols-1 justify-items-center gap-x-8 gap-y-10 sm:grid-cols-2 md:gap-y-16 lg:grid-cols-3">
+                                    {values.map((value: { title: string; description: string; icon?: string | FC<{ className?: string }>; color?: FeaturedIconColor }, index: number) => {
+                                        // Use star for all if any icon is missing, otherwise use the specified icon
+                                        const IconComponent = useStarForAll ? mapIcon('star') : (mapIcon(value.icon) || mapIcon('star'));
+                                        if (!IconComponent) return null;
+                                
+                                const IconWrapper = ({ className }: { className?: string }) => (
+                                    <div className={className}>
+                                        <IconComponent className="w-full h-full" />
+                                    </div>
+                                );
+
+                                return (
+                                    <li key={index}>
+                                        <div className="flex max-w-sm flex-col items-center gap-4 text-center">
+                                            <FeaturedIcon 
+                                                icon={IconWrapper} 
+                                                size="lg" 
+                                                color={(value.color as FeaturedIconColor) || 'gray'} 
+                                                theme="modern" 
+                                                className="hidden md:inline-flex"
+                                            />
+                                            <FeaturedIcon 
+                                                icon={IconWrapper} 
+                                                size="md" 
+                                                color={(value.color as FeaturedIconColor) || 'gray'} 
+                                                theme="modern" 
+                                                className="inline-flex md:hidden"
+                                            />
+
+                                            <div>
+                                                <h3 className="text-lg font-semibold text-primary">{value.title}</h3>
+                                                <p className="mt-1 text-md text-tertiary">{value.description}</p>
+                                            </div>
+                                        </div>
+                                        </li>
+                                    );
+                                })}
+                            </ul>
+                        );
+                        })()}
+                    </div>
+                ) : null}
+            </div>
+        </section>
+    );
+};
+
+

package/src/design_system/utils/icon-mapping.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Heart, Star01, Users01, Clock, CheckCircle } from '@untitledui/icons';
+
+/**
+ * Icon mapping utility for converting icon string names to icon components.
+ * Used across design system components to ensure consistent icon rendering.
+ */
+export const iconMap: Record<string, React.FC<{ className?: string }>> = {
+  heart: Heart,
+  star: Star01,
+  users: Users01,
+  clock: Clock,
+  check: CheckCircle,
+};
+
+/**
+ * Maps an icon (string, component, or ReactNode) to an icon component.
+ * If it's already a component, returns it as-is.
+ * If it's a string, looks it up in the iconMap.
+ * If it's null or other ReactNode, returns undefined.
+ */
+export function mapIcon(icon: string | React.FC<{ className?: string }> | React.ReactNode | undefined | null): React.FC<{ className?: string }> | undefined {
+  if (!icon) return undefined;
+  if (typeof icon === 'function') return icon;
+  if (typeof icon === 'string') return iconMap[icon.toLowerCase()];
+  return undefined; // For other ReactNode types
+}
+

package/src/index.ts

@@ -0,0 +1,7 @@
+// Keystone Design System
+// Main entry point for @keystone/design-system package
+
+export * from './design_system/sections';
+export * from './design_system/elements';
+export * from './lib/hooks';
+export * from './contexts';

package/src/lib/component-registry.ts

@@ -0,0 +1,53 @@
+/**
+ * Component Registry
+ * Runtime registry for component theme variants
+ */
+
+'use client';
+
+import React from 'react';
+import { Theme } from '../themes';
+
+type ComponentType = React.ComponentType<any>;
+
+const registry = new Map<string, Map<string, ComponentType>>();
+
+export function registerThemeVariant(
+  componentName: string,
+  theme: string,
+  component: ComponentType
+) {
+  if (!registry.has(componentName)) {
+    registry.set(componentName, new Map());
+  }
+  registry.get(componentName)!.set(theme, component);
+}
+
+export function getThemedComponent(
+  componentName: string,
+  theme: Theme = 'classic'
+): ComponentType {
+  const variants = registry.get(componentName);
+  
+  if (!variants || variants.size === 0) {
+    throw new Error(`No theme variants registered for "${componentName}"`);
+  }
+  
+  if (variants.has(theme)) {
+    return variants.get(theme)!;
+  }
+  
+  if (theme === 'classic') {
+    throw new Error(`No classic variant for "${componentName}" - use base component`);
+  }
+  
+  throw new Error(`No variant available for "${componentName}.${theme}"`);
+}
+
+export function getRegistry() {
+  const result: Record<string, string[]> = {};
+  registry.forEach((variants, name) => {
+    result[name] = Array.from(variants.keys());
+  });
+  return result;
+}

package/src/lib/hooks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Utility hooks for client-side UI functionality
+ */
+
+// Generic React hooks for UI functionality
+export { useBreakpoint } from './use-breakpoint';
+export { useClipboard } from './use-clipboard';
+export { useResizeObserver } from './use-resize-observer';

package/src/lib/hooks/use-breakpoint.ts

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const screens = {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+};
+
+/**
+ * Checks whether a particular Tailwind CSS viewport size applies.
+ *
+ * @param size The size to check, which must either be included in Tailwind CSS's
+ * list of default screen sizes, or added to the Tailwind CSS config file.
+ *
+ * @returns A boolean indicating whether the viewport size applies.
+ */
+export const useBreakpoint = (size: "sm" | "md" | "lg" | "xl" | "2xl") => {
+    const [matches, setMatches] = useState(typeof window !== "undefined" ? window.matchMedia(`(min-width: ${screens[size]})`).matches : true);
+
+    useEffect(() => {
+        const breakpoint = window.matchMedia(`(min-width: ${screens[size]})`);
+
+        setMatches(breakpoint.matches);
+
+        const handleChange = (value: MediaQueryListEvent) => setMatches(value.matches);
+
+        breakpoint.addEventListener("change", handleChange);
+        return () => breakpoint.removeEventListener("change", handleChange);
+    }, [size]);
+
+    return matches;
+};
+

package/src/lib/hooks/use-clipboard.ts

@@ -0,0 +1,79 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+const DEFAULT_TIMEOUT = 2000;
+
+type UseClipboardReturnType = {
+    /**
+     * The state indicating whether the text has been copied.
+     * If a string is provided, it will be used as the identifier for the copied state.
+     */
+    copied: string | boolean;
+    /**
+     * Function to copy text to the clipboard using the modern clipboard API.
+     * Falls back to the fallback function if the modern API fails.
+     *
+     * @param {string} text - The text to be copied.
+     * @param {string} [id] - Optional identifier to set the copied state.
+     * @returns {Promise<Object>} - A promise that resolves to an object containing:
+     *  - `success` (boolean): Whether the copy operation was successful.
+     *  - `error` (Error | undefined): The error object if the copy operation failed.
+     */
+    copy: (text: string, id?: string) => Promise<{ success: boolean; error?: Error }>;
+};
+
+/**
+ * Custom hook to copy text to the clipboard.
+ *
+ * @returns {UseClipboardReturnType} - An object containing the copied state and the copy function.
+ */
+export const useClipboard = (): UseClipboardReturnType => {
+    const [copied, setCopied] = useState<string | boolean>(false);
+
+    // Fallback function for older browsers
+    const fallback = (text: string, id?: string) => {
+        try {
+            // Textarea to copy the text to the clipboard
+            const textArea = document.createElement("textarea");
+            textArea.value = text;
+            textArea.style.position = "absolute";
+            textArea.style.left = "-99999px";
+
+            document.body.appendChild(textArea);
+            textArea.select();
+
+            const success = document.execCommand("copy");
+            textArea.remove();
+
+            setCopied(id || true);
+            setTimeout(() => setCopied(false), DEFAULT_TIMEOUT);
+
+            return success ? { success: true } : { success: false, error: new Error("execCommand returned false") };
+        } catch (err) {
+            return {
+                success: false,
+                error: err instanceof Error ? err : new Error("Fallback copy failed"),
+            };
+        }
+    };
+
+    const copy = useCallback(async (text: string, id?: string) => {
+        if (navigator.clipboard && window.isSecureContext) {
+            try {
+                await navigator.clipboard.writeText(text);
+
+                setCopied(id || true);
+                setTimeout(() => setCopied(false), DEFAULT_TIMEOUT);
+
+                return { success: true };
+            } catch {
+                // If modern method fails, try fallback
+                return fallback(text, id);
+            }
+        }
+        return fallback(text);
+    }, []);
+
+    return { copied, copy };
+};