feat(v5): clean unused librairies and move everything to Core Next

Author: Plopix

.github/workflows/release.yaml

@@ -11,12 +11,12 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - name: ⬇️ Checkout repo
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
             - name: ⎔ Setup node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
-                  node-version: 18
+                  node-version: 22
                   always-auth: true
                   registry-url: 'https://registry.npmjs.org'
                   scope: '@crystallize'

LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2022 Crystallize, https://crystallize.com
+Copyright (c) 2025 Crystallize, https://crystallize.com
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,65 +1,107 @@
-# React JS Components
+# Crystallize React components
 
-This brings Image, Grid and Content Transformer component to ease your rendering when using React JS.
+Typed React components for rendering Crystallize content: Image, Video, Grid, and Content Transformer.
 
 ## Installation
 
-With NPM:
+Use your favorite package manager:
 
 ```bash
+# pnpm
+pnpm add @crystallize/reactjs-components
+
+# npm
 npm install @crystallize/reactjs-components
+
+# yarn
+yarn add @crystallize/reactjs-components
 ```
 
-With Yarn:
+All components are exported from the package root and ship with TypeScript types.
 
-```bash
-yarn add @crystallize/reactjs-components
+```typescript
+import { Image, Video, GridRenderer, GridRenderingType, ContentTransformer } from '@crystallize/reactjs-components';
 ```
 
 ## Image
 
-This output an `img` tag with different source variations from Crystallize using _srcset_. Use this to easily build responsive images powered by Crystallize.
+Responsive <img> wrapped in a <picture> with srcset support. Pass the image object you get from Crystallize.
+
+```typescript
+import { Image } from '@crystallize/reactjs-components';
 
-```javascript
-import { Image } from '@crystallize/reactjs-components/dist/image';
 const imageFromCrystallize = {
-    url: '...',
-    variants: [...]
-}
+    url: 'https://media.crystallize.com/.../image.jpg',
+    altText: 'A nice product',
+    variants: [
+        // ImageVariant[] from @crystallize/schema
+        { url: '.../[email protected]', width: 400 },
+        { url: '.../[email protected]', width: 700 },
+        { url: '.../[email protected]', width: 1000 },
+    ],
+};
 
-<Image
-    {...imageFromCrystallize}
-    sizes="(max-width: 400px) 300w, 700px"
-/>
+export function ProductImage() {
+    return <Image {...imageFromCrystallize} sizes="(max-width: 600px) 90vw, 700px" className="product-image" />;
+}
 ```
 
-There is a live demo: https://crystallizeapi.github.io/libraries/reactjs-components/image
+Notes
+
+- If the API returns caption in json/html/plainText, the component renders it as <figcaption>.
+- You can provide width/height to avoid layout shift; otherwise the largest variant's dimensions are used when available.
+
+Live demo: https://crystallizeapi.github.io/libraries/reactjs-components/image
 
 ## Video
 
-This output videos from Crystallize using the native video element.
+Progressive video player that prefers HLS (m3u8) and falls back to MPEG-DASH (mpd). Renders a thumbnail and a play button, then hydrates the player.
+
+Important
 
-```javascript
-import { Video } from '@crystallize/reactjs-components/dist/video';
+- This component is client-side only (it contains 'use client'). In Next.js, place it in a client component.
+- Include the provided styles once in your app:
+
+```typescript
 import '@crystallize/reactjs-components/assets/video/styles.css';
+```
+
+Usage
+
+```typescript
+import { Video } from '@crystallize/reactjs-components';
+
 const videoFromCrystallize = {
-    playlists: [...],
-    thumbnails: [...]
-}
+    playlists: ['https://media.crystallize.com/.../master.m3u8', 'https://media.crystallize.com/.../stream.mpd'],
+    thumbnails: [
+        {
+            url: 'https://media.crystallize.com/.../thumb.jpg',
+            variants: [{ url: '.../[email protected]', width: 700 }],
+        },
+    ],
+};
 
-<Video
-    {...videoFromCrystallize}
-    thumbnmailProps={{ sizes: "(max-width: 700px) 90vw, 700px" }}
-/>
+export function HeroVideo() {
+    return (
+        <Video
+            {...videoFromCrystallize}
+            autoPlay
+            muted
+            controls
+            className="hero-video"
+            videoProps={{ playsInline: true }}
+        />
+    );
+}
 ```
 
-There is a live demo: https://crystallizeapi.github.io/libraries/reactjs-components/video
+Live demo: https://crystallizeapi.github.io/libraries/reactjs-components/video
 
 ## Grid
 
-That makes it easy to render Crystallize grids with React JS. In order to use the grid renderer you'll need to have fetched your grid model. This can be fetched fairly easily from Crystallize's API via GraphQL.
+Render Crystallize grids in React using CSS Grid (default), a semantic table, or row/col wrappers.
 
-At the minimum you will need to fetch layout of each column and some properties on the item. Your query might look something like this:
+Fetch the grid via GraphQL (minimum shape shown):
 
 ```graphql
 query grid($id: Int!, $language: String!) {
@@ -81,49 +123,54 @@ query grid($id: Int!, $language: String!) {
 }
 ```
 
-Then, inside your component, render the Grid, passing through the grid model as a prop. By default, the grid is rendered using CSS grid but it could also be a Table.
+Render
 
-```javascript
-<GridRenderer grid={grid} type={GridRenderingType.Div} cellComponent={Cell} />
-<GridRenderer grid={grid} type={GridRenderingType.Table} cellComponent={Cell} />
-<GridRenderer grid={grid} type={GridRenderingType.RowCol} cellComponent={Cell} />
-```
+```typescript
+import { GridRenderer, GridRenderingType } from '@crystallize/reactjs-components';
 
-There is a live demo: https://crystallizeapi.github.io/libraries/reactjs-components/grid
+const Cell = ({ cell }: { cell: any }) => <div>{cell.item?.name}</div>;
 
-### To go further
+<>
+    {/* CSS Grid */}
+    <GridRenderer grid={grid} type={GridRenderingType.Div} cellComponent={Cell} />
 
-If you want full control over each of the cells, you can instead supply a function as the children of the grid component. This will allow you to iterate over each of the cells and mutate them as you please.
+    {/* Table */}
+    <GridRenderer grid={grid} type={GridRenderingType.Table} cellComponent={Cell} />
 
-```javascript
-const children = ({ cells }) => {
-    return cells.map((cell) => (
-        <div
-            style={{
-                gridColumn: `span ${cell.layout.colspan}`,
-                gridRow: `span ${cell.layout.rowspan}`,
-            }}
-        >
-            {cell.item.name}
-        </div>
-    ));
-};
+    {/* Row/Col wrappers */}
+    <GridRenderer grid={grid} type={GridRenderingType.RowCol} cellComponent={Cell} />
+</>;
+```
 
-return (
-    <GridRenderer grid={grid} type={GridRenderingType.Div} cellComponent={Cell}>
-        {children}
-    </GridRenderer>
-);
+Customize per cell via a render-prop or styleForCell
+
+```tsx
+<GridRenderer grid={grid} type={GridRenderingType.Div} cellComponent={Cell}>
+    {({ cells }) =>
+        cells.map((cell) => (
+            <div
+                key={`${cell.layout.rowIndex}-${cell.layout.colIndex}`}
+                style={{ gridColumn: `span ${cell.layout.colspan}`, gridRow: `span ${cell.layout.rowspan}` }}
+            >
+                {cell.item.name}
+            </div>
+        ))
+    }
+</GridRenderer>
 ```
 
+Live demo: https://crystallizeapi.github.io/libraries/reactjs-components/grid
+
 ## Content Transformer
 
-This helps you to transform Crystallize rich text json to React html components.
+Render Crystallize rich text JSON to React elements with optional per-node overrides.
+
+```tsx
+import { ContentTransformer, NodeContent, type Overrides, type NodeProps } from '@crystallize/reactjs-components';
 
-```javascript
 const overrides: Overrides = {
     link: (props: NodeProps) => (
-        <a href={props.metadata?.href}>
+        <a href={props.metadata?.href} rel={props.metadata?.rel} target={props.metadata?.target}>
             <NodeContent {...props} />
         </a>
     ),
@@ -132,6 +179,13 @@ const overrides: Overrides = {
 <ContentTransformer json={richTextJson} overrides={overrides} />;
 ```
 
-There is a live demo: https://crystallizeapi.github.io/libraries/reactjs-components/content-transformer
+Live demo: https://crystallizeapi.github.io/libraries/reactjs-components/content-transformer
+
+## Notes on SSR
+
+- Image, Grid, and Content Transformer are SSR-friendly.
+- Video must run on the client. In Next.js, put the usage in a Client Component.
+
+## License
 
-[crystallizeobject]: crystallize_marketing|folder|6269c9819161f671155d939d
+MIT © Crystallize

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@crystallize/reactjs-components",
     "license": "MIT",
-    "version": "3.0.1",
+    "version": "5.0.0",
     "type": "module",
     "author": "Crystallize <[email protected]> (https://crystallize.com)",
     "contributors": [
@@ -21,9 +21,9 @@
     },
     "exports": {
         ".": {
+            "types": "./dist/index.d.ts",
             "import": "./dist/index.js",
-            "require": "./dist/index.cjs",
-            "types": "./dist/index.d.ts"
+            "require": "./dist/index.cjs"
         },
         "./assets/video/styles.css": "./assets/video/styles.css"
     },
@@ -35,15 +35,16 @@
         "react-dom": "*"
     },
     "dependencies": {
-        "@crystallize/js-api-client": "workspace:*"
+        "@crystallize/schema": "workspace:*"
     },
     "devDependencies": {
-        "@tsconfig/node20": "^20.1.4",
-        "@types/node": "^20.14.9",
-        "@types/react": "^17 || ^18",
-        "@types/react-dom": "^17 || ^18",
-        "tsup": "^8.1.0",
-        "vitest": "^1.6.0",
-        "typescript": "^5.5.2"
+        "@crystallize/js-api-client": "workspace:*",
+        "@tsconfig/node22": "^22.0.2",
+        "@types/node": "^24.2.0",
+        "@types/react": "^19.1.9",
+        "@types/react-dom": "^19.1.7",
+        "tsup": "^8.5.0",
+        "typescript": "^5.9.2",
+        "vitest": "^3.2.4"
     }
 }

src/grid/GridRenderer.tsx

@@ -3,7 +3,15 @@ import { CSSGrid } from './CSSGrid.js';
 import { getGridDimensions } from './grid-renderer-utils.js';
 import { RowCol } from './RowCol.js';
 import { Table } from './Table.js';
-import { GridRow, GridCell, GridRendererProps, GridRenderingType } from './types.js';
+import {
+    GridRow,
+    GridCell,
+    GridRendererProps,
+    GridRenderingType,
+    TableGridProps,
+    RowColGridProps,
+    CSSGridProps,
+} from './types.js';
 
 export const GridRenderer: FunctionComponent<GridRendererProps> = ({
     cellComponent,
@@ -14,13 +22,14 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
     ...props
 }) => {
     if (!cellComponent && !children) {
-        console.error('@crystallize/grid-renderer: missing ´cellComponent` or children function');
+        console.error(`@crystallize/grid-renderer: missing 'cellComponent' or children function`);
         return null;
     }
     if (!grid.rows.length) return null;
     const dimensions = getGridDimensions(grid.rows);
 
     if (type === GridRenderingType.Table) {
+        const tableChildren = children as TableGridProps['children'];
         return (
             <Table
                 cellComponent={cellComponent}
@@ -29,11 +38,12 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
                 styleForCell={styleForCell}
                 {...props}
             >
-                {children}
+                {tableChildren}
             </Table>
         );
     }
     if (type === GridRenderingType.RowCol) {
+        const rowColChildren = children as RowColGridProps['children'];
         return (
             <RowCol
                 cellComponent={cellComponent}
@@ -42,13 +52,14 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
                 styleForCell={styleForCell}
                 {...props}
             >
-                {children}
+                {rowColChildren}
             </RowCol>
         );
     }
 
     const cells = grid.rows.reduce<GridCell[]>((memo, row) => memo.concat(row.columns), []);
 
+    const cssGridChildren = children as CSSGridProps['children'];
     return (
         <CSSGrid
             cellComponent={cellComponent}
@@ -57,7 +68,7 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
             styleForCell={styleForCell}
             {...props}
         >
-            {children}
+            {cssGridChildren}
         </CSSGrid>
     );
 };