@se-studio/core-ui 0.1.0 → 0.1.1

package/README.md

@@ -1,12 +1,15 @@
 # @se-studio/core-ui
 
-Shared React UI component library with Tailwind CSS v4 for SE Studio applications.
+Shared React UI component library with Tailwind CSS v4 and CMS infrastructure for SE Studio applications.
 
 ## Features
 
 - **React 19** - Built with the latest React
 - **TypeScript** - Full type safety
-- **Tailwind CSS v4** - Modern utility-first CSS framework
+- **CMS Infrastructure** - Complete system for mapping Contentful content to React components
+- **Tailwind CSS v4** - Modern utility-first CSS framework with custom breakpoints
+- **Visual Components** - Optimized image, video, and animation components
+- **Rich Text Rendering** - RTF (Rich Text Field) support with embedded content
 - **Tree-shakeable** - Import only what you need
 - **Dual exports** - ESM and CJS support
 - **Fully tested** - Comprehensive test coverage with Vitest
@@ -17,23 +20,45 @@ Shared React UI component library with Tailwind CSS v4 for SE Studio application
 pnpm add @se-studio/core-ui
 ```
 
-## Usage
+## Quick Start
 
-### Importing Components
+### Basic Component Usage
 
 ```tsx
-import { ResponsiveVisual } from '@se-studio/core-ui';
-import type { IResponsiveVisual } from '@se-studio/core-data-types';
-
-const visual: IResponsiveVisual = {
-  // ... your visual data
+import { Visual } from '@se-studio/core-ui';
+import type { IAsset } from '@se-studio/core-data-types';
+
+const image: IAsset = {
+  src: 'https://images.ctfassets.net/...',
+  alt: 'Hero image',
+  width: 1920,
+  height: 1080
 };
 
 export default function MyPage() {
-  return <ResponsiveVisual visual={visual} />;
+  return <Visual image={image} className="w-full h-auto" />;
 }
 ```
 
+### CMS Infrastructure Usage
+
+For content-driven applications, use the CMS infrastructure:
+
+```tsx
+import { CmsContent } from '@se-studio/core-ui';
+import { contentfulPageRest } from '@se-studio/contentful-rest-api';
+
+// Fetch page from Contentful
+const page = await contentfulPageRest(config, 'home');
+
+// Automatically render the correct components
+export default function Page() {
+  return <CmsContent content={page} config={rendererConfig} />;
+}
+```
+
+See the [CMS Infrastructure Guide](./CMS_INFRASTRUCTURE.md) for detailed documentation.
+
 ### Using Tailwind Configuration
 
 Import the Tailwind configuration in your `tailwind.config.ts`:
@@ -64,28 +89,109 @@ import '@se-studio/core-ui/styles';
 
 ## Components
 
-### ResponsiveVisual
+### CMS Infrastructure Components
 
-Renders responsive visual content (images, videos, animations) from Contentful.
+#### CmsContent
 
-**Props:**
+Main component for rendering CMS content with automatic component mapping.
 
-- `visual` - `IResponsiveVisual` - The visual data from Contentful
-- `className?` - `string` - Additional CSS classes
-- `priority?` - `boolean` - Enable priority loading for above-the-fold images
+**Props:**
+- `content` - Page or entry content from Contentful
+- `config` - `CmsRendererConfig` - Component and collection mapping configuration
+- `context?` - Optional context data to pass to components
 
 **Example:**
+```tsx
+import { CmsContent } from '@se-studio/core-ui';
+
+<CmsContent content={page} config={rendererConfig} />
+```
+
+#### CmsComponent
+
+Renders individual CMS components with type-based routing.
+
+**Props:**
+- `component` - Component data from Contentful
+- `config` - Component mapping configuration
+- `context?` - Optional context
+
+#### CmsCollection
+
+Renders CMS collections (arrays of components) with type-based routing.
 
+**Props:**
+- `collection` - Array of components from Contentful
+- `config` - Collection mapping configuration
+- `context?` - Optional context
+
+### Visual Components
+
+#### Visual
+
+Optimized image/video component with Next.js Image integration.
+
+**Props:**
+- `image` - `IAsset` - Image data with src, alt, width, height
+- `video?` - `IAsset` - Optional video data
+- `animation?` - `IAsset` - Optional animation/Lottie data
+- `className?` - Additional CSS classes
+- `priority?` - Enable priority loading for above-the-fold content
+- `fill?` - Use Next.js Image fill mode
+
+**Example:**
 ```tsx
-import { ResponsiveVisual } from '@se-studio/core-ui';
+import { Visual } from '@se-studio/core-ui';
 
-<ResponsiveVisual
-  visual={responsiveVisualData}
+<Visual
+  image={imageData}
   className="w-full h-auto"
   priority
 />
 ```
 
+### Rich Text Components
+
+#### RTF (Rich Text Field)
+
+Renders Contentful rich text with support for embedded entries and assets.
+
+**Props:**
+- `document` - Contentful rich text document
+- `embeddedComponents?` - Configuration for embedded components
+- `embeddedCollections?` - Configuration for embedded collections
+
+**Example:**
+```tsx
+import { RTF } from '@se-studio/core-ui';
+
+<RTF
+  document={richTextField}
+  embeddedComponents={componentConfig}
+/>
+```
+
+### Utility Components
+
+#### UnusedChecker
+
+Development utility to detect unused CMS content types in your configuration.
+
+**Props:**
+- `config` - Your CMS renderer configuration
+- `pages` - Array of pages to check against
+- `allowedUnused?` - Array of content types allowed to be unused
+
+**Example:**
+```tsx
+import { UnusedChecker } from '@se-studio/core-ui';
+
+<UnusedChecker
+  config={rendererConfig}
+  pages={allPages}
+/>
+```
+
 ## Development
 
 ```bash
@@ -108,7 +214,9 @@ pnpm type-check
 pnpm lint
 ```
 
-## Custom Breakpoints
+## Tailwind Configuration
+
+### Custom Breakpoints
 
 The library includes custom breakpoints optimized for modern responsive design:
 
@@ -116,6 +224,96 @@ The library includes custom breakpoints optimized for modern responsive design:
 - `laptop`: 1024px
 - `desktop`: 1440px
 
+Use them in your Tailwind classes:
+
+```tsx
+<div className="hidden tablet:block laptop:grid laptop:grid-cols-2 desktop:grid-cols-3">
+  {/* Content */}
+</div>
+```
+
+### Typography Utilities
+
+Custom typography styles are available:
+
+- `text-h1` - Heading 1 style
+- `text-h2` - Heading 2 style
+- `text-h3` - Heading 3 style
+- `text-h4` - Heading 4 style
+- `text-body` - Body text style
+- `text-body-sm` - Small body text
+
+## Configuration System
+
+The package exports several configuration utilities:
+
+### createCmsRendererConfig
+
+Creates a type-safe CMS renderer configuration:
+
+```tsx
+import { createCmsRendererConfig } from '@se-studio/core-ui';
+
+const config = createCmsRendererConfig({
+  components: {
+    heroSection: HeroComponent,
+    featureSection: FeatureComponent
+  },
+  collections: {
+    cardGrid: CardGridCollection
+  }
+});
+```
+
+### mergeCmsRendererConfig
+
+Merges multiple configurations (useful for environment-specific or preview mode configs):
+
+```tsx
+import { mergeCmsRendererConfig } from '@se-studio/core-ui';
+
+const previewConfig = mergeCmsRendererConfig(
+  baseConfig,
+  previewOverrides
+);
+```
+
+## API Exports
+
+### Component Configuration Types
+
+- `ComponentConfig<TComponent, TContext>` - Type-safe component configuration
+- `CollectionConfig<TCollection, TContext>` - Type-safe collection configuration
+- `CmsRendererConfig` - Complete renderer configuration type
+
+### Utility Functions
+
+- `buildPageMetadata(page)` - Generate Next.js metadata from page data
+- `handleCmsError(error)` - Error handling utility for CMS operations
+- `extractComponentInfo(component, config)` - Extract component rendering info
+- `extractCollectionInfo(collection, config)` - Extract collection rendering info
+
+## Advanced Usage
+
+For advanced CMS infrastructure usage, including:
+- Configuration composition patterns
+- Embeddable components
+- Context passing
+- Type-safe prop extraction
+- Preview mode setup
+
+See the [CMS Infrastructure Guide](./CMS_INFRASTRUCTURE.md).
+
+## Examples
+
+Check out the [example-pointme app](../../apps/example-pointme) for a complete implementation using all core-ui features.
+
+## Learn More
+
+- [CMS Infrastructure Guide](./CMS_INFRASTRUCTURE.md) - Comprehensive guide to the CMS system
+- [Core Data Types](../core-data-types/README.md) - Shared TypeScript types
+- [Contentful REST API](../contentful-rest-api/README.md) - API client for Contentful
+
 ## License
 
 MIT

package/dist/CmsRendererConfig.d.ts

@@ -0,0 +1,38 @@
+import type { IContentContext } from '@se-studio/core-data-types';
+import type { React } from 'next/dist/server/route-modules/app-page/vendored/rsc/entrypoints';
+import type { PropsWithChildren } from 'react';
+import type { CollectionMap } from './components/CmsCollection';
+import type { ComponentMap } from './components/CmsComponent';
+import type { ExternalComponentMap, InternalLinkRenderer, VisualComponentRenderer } from './components/CmsContent';
+export interface CmsRendererConfig {
+    componentMap: ComponentMap;
+    collectionMap: CollectionMap;
+    externalComponentMap: ExternalComponentMap;
+    visualComponentRenderer: VisualComponentRenderer;
+    internalLinkRenderer: InternalLinkRenderer;
+    customContentMap?: Partial<Record<string, React.FC<{
+        information: any;
+        contentContext: IContentContext;
+    }>>>;
+    showUnknownTypeErrors: boolean;
+    showRenderErrors: boolean;
+    defaultComponentRenderer: React.FC<{
+        information: any;
+        contentContext: IContentContext;
+        rendererConfig: CmsRendererConfig;
+    }>;
+    defaultCollectionRenderer: React.FC<{
+        information: any;
+        contentContext: IContentContext;
+        rendererConfig: CmsRendererConfig;
+    }>;
+    basicLinkRenderer: React.FC<PropsWithChildren<{
+        href?: string;
+    }>>;
+    embeddedContentRenderer: React.FC<{
+        information: any;
+        contentContext: IContentContext;
+        rendererConfig: CmsRendererConfig;
+    }>;
+}
+//# sourceMappingURL=CmsRendererConfig.d.ts.map

package/dist/CmsRendererConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CmsRendererConfig.d.ts","sourceRoot":"","sources":["../src/CmsRendererConfig.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kEAAkE,CAAC;AAC9F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACxB,MAAM,yBAAyB,CAAC;AAyCjC,MAAM,WAAW,iBAAiB;IAahC,YAAY,EAAE,YAAY,CAAC;IAc3B,aAAa,EAAE,aAAa,CAAC;IAc7B,oBAAoB,EAAE,oBAAoB,CAAC;IAa3C,uBAAuB,EAAE,uBAAuB,CAAC;IAajD,oBAAoB,EAAE,oBAAoB,CAAC;IAc3C,gBAAgB,CAAC,EAAE,OAAO,CACxB,MAAM,CACJ,MAAM,EACN,KAAK,CAAC,EAAE,CAAC;QACP,WAAW,EAAE,GAAG,CAAC;QACjB,cAAc,EAAE,eAAe,CAAC;KACjC,CAAC,CACH,CACF,CAAC;IAQF,qBAAqB,EAAE,OAAO,CAAC;IAQ/B,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;QACjC,WAAW,EAAE,GAAG,CAAC;QACjB,cAAc,EAAE,eAAe,CAAC;QAChC,cAAc,EAAE,iBAAiB,CAAC;KACnC,CAAC,CAAC;IACH,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC;QAClC,WAAW,EAAE,GAAG,CAAC;QACjB,cAAc,EAAE,eAAe,CAAC;QAChC,cAAc,EAAE,iBAAiB,CAAC;KACnC,CAAC,CAAC;IACH,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAClE,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC;QAChC,WAAW,EAAE,GAAG,CAAC;QACjB,cAAc,EAAE,eAAe,CAAC;QAChC,cAAc,EAAE,iBAAiB,CAAC;KACnC,CAAC,CAAC;CACJ"}

package/dist/CmsRendererConfig.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CmsRendererConfig.js.map

package/dist/CmsRendererConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CmsRendererConfig.js","sourceRoot":"","sources":["../src/CmsRendererConfig.ts"],"names":[],"mappings":""}

package/dist/__tests__/setup.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=setup.d.ts.map

package/dist/__tests__/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/__tests__/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/__tests__/setup.js

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=setup.js.map

package/dist/__tests__/setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.js","sourceRoot":"","sources":["../../src/__tests__/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/components/AnimationComponent.d.ts

@@ -0,0 +1,13 @@
+import type { IAnimation } from '@se-studio/core-data-types';
+import type { IVisualProps } from './Visual';
+interface IAnimationProps extends IVisualProps {
+    direction?: number;
+    controls?: boolean;
+    count?: number;
+    hover?: boolean;
+}
+declare function Animation({ className, style, }: {
+    animation: IAnimation;
+} & Omit<IAnimationProps, 'analyticsContext' | 'componentLabel'>): import("react/jsx-runtime").JSX.Element;
+export default Animation;
+//# sourceMappingURL=AnimationComponent.d.ts.map

package/dist/components/AnimationComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationComponent.d.ts","sourceRoot":"","sources":["../../src/components/AnimationComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,UAAU,eAAgB,SAAQ,YAAY;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,EAAE,UAAU,CAAC;CACvB,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAkB,GAAG,gBAAgB,CAAC,2CAM/D;AAED,eAAe,SAAS,CAAC"}

package/dist/components/AnimationComponent.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function Animation({ className, style, }) {
+    return (_jsx("div", { className: className, style: style, children: "Animation Component" }));
+}
+export default Animation;
+//# sourceMappingURL=AnimationComponent.js.map

package/dist/components/AnimationComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationComponent.js","sourceRoot":"","sources":["../../src/components/AnimationComponent.tsx"],"names":[],"mappings":";AAUA,SAAS,SAAS,CAAC,EACjB,SAAS,EACT,KAAK,GAGyD;IAC9D,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,oCAEjC,CACP,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}

package/dist/components/ClientMonitor.d.ts

@@ -1,3 +1,2 @@
-declare const ClientMonitor: React.FC;
-
-export { ClientMonitor };
+export declare const ClientMonitor: React.FC;
+//# sourceMappingURL=ClientMonitor.d.ts.map

package/dist/components/ClientMonitor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientMonitor.d.ts","sourceRoot":"","sources":["../../src/components/ClientMonitor.tsx"],"names":[],"mappings":"AA4JA,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAYjC,CAAC"}

package/dist/components/ClientMonitor.js

@@ -1,135 +1,137 @@
-"use client";
-import { usePathname } from "next/navigation";
-import { useEffect } from "react";
-import { useDocumentVisible } from "../hooks/useDocumentVisible";
+'use client';
+import { usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+import { useDocumentVisible } from '../hooks/useDocumentVisible';
 let _observer;
 function handleVideo(video, isIntersecting) {
-  if (!isIntersecting) {
-    if (!video.paused) {
-      video.pause();
+    if (!isIntersecting) {
+        if (!video.paused) {
+            video.pause();
+        }
+    }
+    else if (video.paused) {
+        video
+            .play()
+            .then(() => {
+            video.controls = false;
+        })
+            .catch(() => {
+        });
     }
-  } else if (video.paused) {
-    video.play().then(() => {
-      video.controls = false;
-    }).catch(() => {
-    });
-  }
 }
 function handleAnimation(animation, isIntersecting) {
-  const currentState = animation.currentState;
-  if (!isIntersecting) {
-    if (currentState === "playing") {
-      animation.pause();
-    }
-  } else {
-    if (currentState === "paused") {
-      animation.play();
+    const currentState = animation.currentState;
+    if (!isIntersecting) {
+        if (currentState === 'playing') {
+            animation.pause();
+        }
     }
-    if (!currentState || currentState === "loading") {
-      if (animation.play) {
-        animation.play();
-      }
-      animation.autoplay = true;
+    else {
+        if (currentState === 'paused') {
+            animation.play();
+        }
+        if (!currentState || currentState === 'loading') {
+            if (animation.play) {
+                animation.play();
+            }
+            animation.autoplay = true;
+        }
     }
-  }
 }
 function handleAnimatedSection(section, isIntersecting) {
-  section.dataset.visible = isIntersecting ? "true" : "false";
-  if (isIntersecting) {
-    if (!section.dataset.seen) {
-      section.dataset.seen = "true";
+    section.dataset.visible = isIntersecting ? 'true' : 'false';
+    if (isIntersecting) {
+        if (!section.dataset.seen) {
+            section.dataset.seen = 'true';
+        }
     }
-  }
 }
 function intersectionHandler(entries) {
-  for (const entry of entries) {
-    const target = entry.target;
-    switch (target.localName) {
-      case "video":
-        handleVideo(target, entry.isIntersecting);
-        break;
-      case "lottie-player":
-        handleAnimation(target, entry.isIntersecting);
-        break;
-      default:
-        {
-          const element = target;
-          handleAnimatedSection(element, entry.isIntersecting);
+    for (const entry of entries) {
+        const target = entry.target;
+        switch (target.localName) {
+            case 'video':
+                handleVideo(target, entry.isIntersecting);
+                break;
+            case 'lottie-player':
+                handleAnimation(target, entry.isIntersecting);
+                break;
+            default:
+                {
+                    const element = target;
+                    handleAnimatedSection(element, entry.isIntersecting);
+                }
+                break;
         }
-        break;
     }
-  }
 }
 function getObserver() {
-  if (!_observer) {
-    const observer = new IntersectionObserver(intersectionHandler, {
-      threshold: 0.2
-    });
-    _observer = observer;
-  }
-  return _observer;
+    if (!_observer) {
+        const observer = new IntersectionObserver(intersectionHandler, {
+            threshold: 0.2,
+        });
+        _observer = observer;
+    }
+    return _observer;
 }
 function findAllVideos() {
-  const videos = document.getElementsByTagName("video");
-  const observer = getObserver();
-  for (const video of videos) {
-    video.controls = false;
-    video.muted = true;
-    observer.observe(video);
-  }
-  return () => {
+    const videos = document.getElementsByTagName('video');
+    const observer = getObserver();
     for (const video of videos) {
-      observer.unobserve(video);
+        video.controls = false;
+        video.muted = true;
+        observer.observe(video);
     }
-  };
+    return () => {
+        for (const video of videos) {
+            observer.unobserve(video);
+        }
+    };
 }
 function findAllAnimations() {
-  const animations = document.getElementsByTagName("lottie-player");
-  const observer = getObserver();
-  for (const animation of animations) {
-    observer.observe(animation);
-  }
-  return () => {
+    const animations = document.getElementsByTagName('lottie-player');
+    const observer = getObserver();
     for (const animation of animations) {
-      observer.unobserve(animation);
+        observer.observe(animation);
     }
-  };
+    return () => {
+        for (const animation of animations) {
+            observer.unobserve(animation);
+        }
+    };
 }
 function findAllAnimatedSections() {
-  const sections = document.querySelectorAll("[data-component]");
-  const observer = getObserver();
-  for (const section of sections) {
-    observer.observe(section);
-  }
-  return () => {
+    const sections = document.querySelectorAll('[data-component]');
+    const observer = getObserver();
     for (const section of sections) {
-      observer.unobserve(section);
+        observer.observe(section);
     }
-  };
+    return () => {
+        for (const section of sections) {
+            observer.unobserve(section);
+        }
+    };
 }
 function findAll() {
-  const videoCleanup = findAllVideos();
-  const animationCleanup = findAllAnimations();
-  const animatedSectionCleanup = findAllAnimatedSections();
-  return () => {
-    videoCleanup();
-    animationCleanup();
-    animatedSectionCleanup();
-  };
+    const videoCleanup = findAllVideos();
+    const animationCleanup = findAllAnimations();
+    const animatedSectionCleanup = findAllAnimatedSections();
+    return () => {
+        videoCleanup();
+        animationCleanup();
+        animatedSectionCleanup();
+    };
 }
-const ClientMonitor = () => {
-  const isDocumentVisible = useDocumentVisible();
-  const pathname = usePathname();
-  useEffect(() => {
-    pathname;
-    if (isDocumentVisible) {
-      return findAll();
-    }
-    return void 0;
-  }, [pathname, isDocumentVisible]);
-  return null;
-};
-export {
-  ClientMonitor
+export const ClientMonitor = () => {
+    const isDocumentVisible = useDocumentVisible();
+    const pathname = usePathname();
+    useEffect(() => {
+        pathname;
+        if (isDocumentVisible) {
+            return findAll();
+        }
+        return undefined;
+    }, [pathname, isDocumentVisible]);
+    return null;
 };
 //# sourceMappingURL=ClientMonitor.js.map