@croct/plug-react 0.5.2 → 0.5.4

package/README.md

@@ -1,12 +1,5 @@
-<p align="center">
-    <a href="https://croct.com">
-        <img src="https://cdn.croct.io/brand/logo/repo-icon-green.svg" alt="Croct" height="80"/>
-    </a>
-    <br />
-    <strong>Plug React</strong>
-    <br />
-    React components and hooks to plug your React applications into Croct.
-</p>
+![Plug React](https://user-images.githubusercontent.com/943036/213265380-8ad0a5f7-063a-495f-ab2e-0d5a238d8424.png)
+
 <p align="center">
     <a href="https://www.npmjs.com/package/@croct/plug-react"><img alt="Version" src="https://img.shields.io/npm/v/@croct/plug-react"/></a>
     <a href="https://github.com/croct-tech/plug-react/actions?query=workflow%3AValidations"><img alt="Build" src="https://github.com/croct-tech/plug-react/workflows/Validations/badge.svg"/></a>

package/api/fetchContent.d.ts

@@ -9,6 +9,6 @@ type ServerSideOptions<T extends JsonObject> = {
 };
 export type DynamicContentOptions<T extends JsonObject = JsonObject> = Omit<BaseDynamicOptions, 'version'> & ServerSideOptions<T>;
 export type StaticContentOptions<T extends JsonObject = JsonObject> = Omit<BaseStaticOptions, 'version'> & ServerSideOptions<T>;
-export type FetchOptions<T extends JsonObject = JsonObject> = DynamicContentOptions<T> | StaticContentOptions<T>;
+export type FetchOptions<T extends JsonObject = SlotContent> = DynamicContentOptions<T> | StaticContentOptions<T>;
 export declare function fetchContent<I extends VersionedSlotId, C extends JsonObject>(slotId: I, options?: FetchOptions<SlotContent<I, C>>): Promise<Omit<FetchResponse<I, C>, 'payload'>>;
 export {};

package/components/Slot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Slot/index.tsx"],"names":[],"mappings":";;;;AAAA,iCAAwD;AAGxD,uCAA0D;AA4BnD,MAAM,IAAI,GAAkB,CAAO,KAAkC,EAAgB,EAAE;IAC1F,MAAM,EAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAC,GAAG,KAAK,CAAC;IACzC,MAAM,IAAI,GAAgC,IAAA,kBAAU,EAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAElE,OAAO,uBAAC,gBAAQ,cAAE,QAAQ,CAAC,IAAI,CAAC,GAAY,CAAC;AACjD,CAAC,CAAC;AALW,QAAA,IAAI,QAKf"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Slot/index.tsx"],"names":[],"mappings":";;;;AAAA,iCAAwD;AAGxD,uCAA0D;AA4BnD,MAAM,IAAI,GAAkB,CAAO,KAAkC,EAAgB,EAAE;IAC1F,MAAM,EAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAC,GAAG,KAAK,CAAC;IACzC,MAAM,IAAI,GAAG,IAAA,kBAAU,EAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAErC,OAAO,uBAAC,gBAAQ,cAAE,QAAQ,CAAC,IAAI,CAAC,GAAY,CAAC;AACjD,CAAC,CAAC;AALW,QAAA,IAAI,QAKf"}

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from '@croct/plug/sdk/json';
 export * from '@croct/plug/slot';
+export * from '@croct/plug/component';
 export * from './CroctProvider';
 export * from './hooks';
 export * from './components';

package/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("@croct/plug/sdk/json"), exports);
 __exportStar(require("@croct/plug/slot"), exports);
+__exportStar(require("@croct/plug/component"), exports);
 __exportStar(require("./CroctProvider"), exports);
 __exportStar(require("./hooks"), exports);
 __exportStar(require("./components"), exports);

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC;AACrC,mDAAiC;AACjC,kDAAgC;AAChC,0CAAwB;AACxB,+CAA6B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC;AACrC,mDAAiC;AACjC,wDAAsC;AACtC,kDAAgC;AAChC,0CAAwB;AACxB,+CAA6B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@croct/plug-react",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "React components and hooks to plug your React applications into Croct.",
   "author": {
     "name": "Croct",
@@ -37,8 +37,8 @@
     "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@croct/plug": "^0.11.4",
-    "@croct/sdk": "^0.12.0"
+    "@croct/plug": "^0.12.0",
+    "@croct/sdk": "^0.12.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
@@ -47,11 +47,11 @@
     "@babel/preset-typescript": "^7.18.6",
     "@croct/eslint-plugin": "^0.6.3",
     "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-essentials": "^6.4.22",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/builder-webpack5": "^6.5.13",
     "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
+    "@storybook/react": "^6.1.21",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^29.2.3",

package/src/api/fetchContent.test.ts

@@ -1,5 +1,6 @@
 import {ContentFetcher} from '@croct/sdk/contentFetcher';
 import {FetchResponse} from '@croct/plug/plug';
+import {SlotContent} from '@croct/plug/slot';
 import {fetchContent, FetchOptions} from './fetchContent';
 
 const mockFetch: ContentFetcher['fetch'] = jest.fn();
@@ -33,10 +34,14 @@ describe('fetchContent', () => {
             apiKey: apiKey,
             baseEndpointUrl: 'https://croct.example.com',
             timeout: 100,
+            fallback: {
+                _component: 'component-id',
+            },
         };
 
         const result: FetchResponse<typeof slotId> = {
             content: {
+                _component: 'component',
                 id: 'test',
             },
         };
@@ -67,6 +72,7 @@ describe('fetchContent', () => {
 
         const result: FetchResponse<typeof slotId> = {
             content: {
+                _component: 'component',
                 id: 'test',
             },
         };
@@ -97,6 +103,7 @@ describe('fetchContent', () => {
 
         const result: FetchResponse<typeof slotId> = {
             content: {
+                _component: 'component',
                 id: 'test',
             },
         };
@@ -117,7 +124,8 @@ describe('fetchContent', () => {
     it('should return the fallback value on error', async () => {
         const slotId = 'slot-id';
 
-        const fallback = {
+        const fallback: SlotContent = {
+            _component: 'component-id',
             id: 'fallback',
         };
 

package/src/api/fetchContent.ts

@@ -19,7 +19,7 @@ export type DynamicContentOptions<T extends JsonObject = JsonObject> =
 export type StaticContentOptions<T extends JsonObject = JsonObject> =
     Omit<BaseStaticOptions, 'version'> & ServerSideOptions<T>;
 
-export type FetchOptions<T extends JsonObject = JsonObject> = DynamicContentOptions<T> | StaticContentOptions<T>;
+export type FetchOptions<T extends JsonObject = SlotContent> = DynamicContentOptions<T> | StaticContentOptions<T>;
 
 export function fetchContent<I extends VersionedSlotId, C extends JsonObject>(
     slotId: I,

package/src/hooks/useContent.ts

@@ -15,7 +15,7 @@ export type UseContentOptions<I, F> = FetchOptions & {
 function useCsrContent<I, F>(
     id: VersionedSlotId,
     options: UseContentOptions<I, F> = {},
-): SlotContent<VersionedSlotId> | I | F {
+): SlotContent | I | F {
     const {fallback, initial, cacheKey, expiration, ...fetchOptions} = options;
     const croct = useCroct();
 
@@ -31,7 +31,7 @@ function useCsrContent<I, F>(
 function useSsrContent<I, F>(
     _: VersionedSlotId,
     {initial}: UseContentOptions<I, F> = {},
-): SlotContent<VersionedSlotId> | I | F {
+): SlotContent | I | F {
     if (initial === undefined) {
         throw new Error('The initial value is required for server-side rendering (SSR).');
     }

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from '@croct/plug/sdk/json';
 export * from '@croct/plug/slot';
+export * from '@croct/plug/component';
 export * from './CroctProvider';
 export * from './hooks';
 export * from './components';