@treely/strapi-slices 1.1.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "1.1.0",
+  "version": "2.1.0",
   "license": "MIT",
   "author": "Tree.ly GmbH",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/components/SliceRenderer/SliceRenderer.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '../../test/testUtils';
 import { SliceRenderer } from '.';
-import { SliceRendererProps } from './SliceRenderer';
+import { CustomSliceProps, SliceRendererProps } from './SliceRenderer';
 
 const defaultProps: SliceRendererProps = {
   slices: [],
@@ -35,13 +35,15 @@ describe('The SliceRenderer component', () => {
   });
 
   it('renders a custom slice if given', () => {
-    const CustomSlice = () => <div>Custom slice</div>;
+    const CustomSlice = ({ id }: CustomSliceProps): JSX.Element => (
+      <div>Custom slice {id}</div>
+    );
 
     setup({
       slices: [{ id: 1, __component: 'custom.slice' }],
-      additionalSlices: [{ id: 'custom.slice', component: <CustomSlice /> }],
+      CustomSlice,
     });
 
-    expect(screen.getByText('Custom slice')).toBeInTheDocument();
+    expect(screen.getByText('Custom slice custom.slice')).toBeInTheDocument();
   });
 });

package/src/components/SliceRenderer/SliceRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import FullWidthImage from '../../slices/FullWidthImage';
 import Hero from '../../slices/Hero';
 import IconGrid from '../../slices/IconGrid';
@@ -40,9 +40,9 @@ import Comparison from '../../slices/Comparison';
 import Locale from '../../models/Locale';
 import { ContextProvider } from '../ContextProvider';
 
-interface CustomSliceProps {
+export interface CustomSliceProps {
   slice: any;
-  key: string;
+  id: string;
 }
 
 export interface SliceRendererProps {
@@ -51,7 +51,7 @@ export interface SliceRendererProps {
   projects: PortfolioProject[];
   customerStories: IStrapiData<StrapiCustomerStory>[];
   locale?: Locale;
-  additionalSlices?: { id: string; component: ReactNode }[];
+  CustomSlice?: ({ slice, id }: CustomSliceProps) => JSX.Element;
 }
 
 export const SliceRenderer = ({
@@ -60,7 +60,7 @@ export const SliceRenderer = ({
   projects,
   customerStories,
   locale = 'en',
-  additionalSlices = [],
+  CustomSlice,
 }: SliceRendererProps): JSX.Element => (
   <ContextProvider locale={locale}>
     {slices.map((slice: any) => {
@@ -295,14 +295,13 @@ export const SliceRenderer = ({
             />
           );
         default:
-          const additionalSlice = additionalSlices.find(
-            (additionalSlice) => additionalSlice.id === slice.__component
-          );
-          if (additionalSlice) {
+          if (CustomSlice) {
             return (
-              <div key={`${slice.__component}-${slice.id}`}>
-                {additionalSlice.component}
-              </div>
+              <CustomSlice
+                key={`${slice.__component}-${slice.id}`}
+                id={slice.__component}
+                slice={slice}
+              />
             );
           }
 

package/src/index.tsx

@@ -1 +1,75 @@
+import IStrapi from './models/strapi/IStrapi';
+import IStrapiData from './models/strapi/IStrapiData';
+import IStrapiResponse from './models/strapi/IStrapiResponse';
+import StrapiAuthor from './models/strapi/StrapiAuthor';
+import StrapiAvatarWithName from './models/strapi/StrapiAvatarWithName';
+import StrapiBanner from './models/strapi/StrapiBanner';
+import StrapiBlogPost from './models/strapi/StrapiBlogPost';
+import StrapiButtonWithVariant from './models/strapi/StrapiButtonWithVariant';
+import StrapiCategory from './models/strapi/StrapiCategory';
+import StrapiContactArea from './models/strapi/StrapiContactArea';
+import StrapiCustomerStory from './models/strapi/StrapiCustomerStory';
+import StrapiDefaultHeader from './models/strapi/StrapiDefaultHeader';
+import StrapiGlobal from './models/strapi/StrapiGlobal';
+import StrapiGlossaryItem from './models/strapi/StrapiGlossaryItem';
+import StrapiHeroCard from './models/strapi/StrapiHeroCard';
+import StrapiImage from './models/strapi/StrapiImage';
+import StrapiImageFormat from './models/strapi/StrapiImageFormat';
+import StrapiImageWithLink from './models/strapi/StrapiImageWithLink';
+import StrapiLink from './models/strapi/StrapiLink';
+import StrapiLinkList from './models/strapi/StrapiLinkList';
+import StrapiLinkPage from './models/strapi/StrapiLinkPage';
+import StrapiLinkWithIcon from './models/strapi/StrapiLinkWithIcon';
+import StrapiLocalization from './models/strapi/StrapiLocalization';
+import StrapiMedia from './models/strapi/StrapiMedia';
+import StrapiMetadata from './models/strapi/StrapiMetadata';
+import StrapiNavMenu from './models/strapi/StrapiNavMenu';
+import StrapiPage from './models/strapi/StrapiPage';
+import StrapiPortfolio from './models/strapi/StrapiPortfolio';
+import StrapiPortfolioCard from './models/strapi/StrapiPortfolioCard';
+import StrapiProject from './models/strapi/StrapiProject';
+import StrapiProjectCard from './models/strapi/StrapiProjectCard';
+import StrapiQuoteCard from './models/strapi/StrapiQuoteCard';
+import StrapiShapesCard from './models/strapi/StrapiShapesCard';
+import StrapiTextCardWithIcons from './models/strapi/StrapiTextCardWithIcons';
+import StrapiTopBanner from './models/strapi/StrapiTopBanner';
+
 export * from './components/SliceRenderer';
+
+export type {
+  IStrapi,
+  IStrapiData,
+  IStrapiResponse,
+  StrapiAuthor,
+  StrapiAvatarWithName,
+  StrapiBanner,
+  StrapiBlogPost,
+  StrapiButtonWithVariant,
+  StrapiCategory,
+  StrapiContactArea,
+  StrapiCustomerStory,
+  StrapiDefaultHeader,
+  StrapiGlobal,
+  StrapiGlossaryItem,
+  StrapiHeroCard,
+  StrapiImage,
+  StrapiImageFormat,
+  StrapiImageWithLink,
+  StrapiLink,
+  StrapiLinkList,
+  StrapiLinkPage,
+  StrapiLinkWithIcon,
+  StrapiLocalization,
+  StrapiMedia,
+  StrapiMetadata,
+  StrapiNavMenu,
+  StrapiPage,
+  StrapiPortfolio,
+  StrapiPortfolioCard,
+  StrapiProject,
+  StrapiProjectCard,
+  StrapiQuoteCard,
+  StrapiShapesCard,
+  StrapiTextCardWithIcons,
+  StrapiTopBanner,
+};