Installation

coral-storyblok

This package provides Storyblok editable components ready to be used directly with the @storyblok/react package.

This package has dependencies on the following:

react
react-dom
@krakentech/coral
@storyblok/react@3.36.1
storyblok-rich-text-react-renderer
axe-core To install everything:


pnpm add react react-dom @krakentech/coral @storyblok/react@3.36.1 @krakentech/coral-storyblok storyblok-rich-text-react-renderer axe-core

To install just this package:


pnpm add @krakentech/coral-storyblok

Importing

To import all of the Coral Storyblok components into your Block Library, you can do the following:

Request editor access to the coral Storyblok space, this can be done in the #coral-feedback Slack channel
npm i -g storyblok (install the Storyblok CLI globally)
storyblok login (login to the Storyblok CLI)
npx @krakentech/coral-storyblok storyblok-push

Note: You cannot use v4 of the Storyblok CLI to push the components, as it does not support the @krakentech/coral-storyblok package. You must use the v3 version of the CLI.

Usage

Use with the storyblokInit function


import { storyblokInit } from "@storyblok/react";
import { coralBloks } from '@krakentech/coral-storyblok';
 
storyblokInit({
    ...
    components: {
        ... // any custom components you may have
        ...coralBloks
    },
});

Then pass the StoryblokComponent from the @storyblok/react package to the CoralStoryblokProvider


import { CoralStoryblokProvider } from '@krakentech/coral-storyblok';
import { StoryblokComponent } from '@storyblok/react';
 
const App = () => (
    <CoralStoryblokProvider StoryblokComponent={StoryblokComponent}>
        {children}
    </CoralStoryblokProvider>
);

Styling

As Panda CSS is a build-time CSS-in-JS library, any arbitrary styles that you apply in Storyblok (think custom widths or heights) cannot be applied at build time, as the compiler cannot know that these values exist. To account for this, you will need to ensure that you are using getStaticProps in your calls to getStoryblokApi and tie this with GetStoryblokStaticCss from @krakentech/coral-storyblok in your app. This means that the content for the page is pre-generated from the Storyblok API, and allows us to generate the necessary CSS for the Storyblok components at build time.

[[...slug]].tsx


import { Container, Stack, Typography } from '@krakentech/coral';
import { GetStoryblokStaticCss } from '@krakentech/coral-storyblok';
import {
    getStoryblokApi,
    ISbStoryData,
    SbBlokData,
    StoryblokComponent,
    useStoryblokState,
} from '@storyblok/react';
import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from 'next';
import Head from 'next/head';
import { FC } from 'react';
 
const Page: FC<{ story: ISbStoryData; css: any }> = ({ story: s, css }) => {
    const story = useStoryblokState(s);
 
    if (!story) {
        return null;
    }
 
    return (
        <Container
            marginX="auto"
            paddingX="sm"
            paddingY="xl"
            maxWidthPreset="md"
            component="section"
        >
            <Head>
                <style>{css}</style>
            </Head>
            <Stack flexDirection="column" gap="lg">
                <Typography textStyle="hero2">{story.name}</Typography>
 
                {story.content.body?.map((nestedBlok: SbBlokData) => (
                    <StoryblokComponent
                        key={nestedBlok._uid}
                        blok={nestedBlok}
                    />
                ))}
            </Stack>
        </Container>
    );
};
 
export default Page;
 
export const getStaticProps: GetStaticProps = async ({ params, preview }) => {
    const slug =
        params?.slug && typeof params.slug !== 'string'
            ? params.slug.join('/')
            : 'home';
 
    const { data } = await getStoryblokApi().get(`cdn/stories/${slug}`, {
        version: preview ? 'draft' : 'published',
        resolve_links: 'url',
    });
 
    return {
        props: {
            story: data ? data.story : false,
            key: data ? data.story.id : false,
            css: data
                ? GetStoryblokStaticCss(data.story.content.body)
                : undefined,
        },
    };
};
 
export const getStaticPaths: GetStaticPaths = async () => {
    const { data } = await getStoryblokApi().get('cdn/links/');
    const paths: GetStaticPathsResult['paths'] = [];
 
    Object.keys(data.links).forEach((linkKey) => {
        const link = data.links[linkKey];
        const splittedSlug: string[] | undefined = link.slug.split('/');
        const slug = link.slug === 'home' ? [''] : splittedSlug;
        paths.push({ params: { slug } });
    });
 
    return { paths, fallback: 'blocking' };
};

You will also need to extend your panda.config.ts file to include static CSS generation for the Storyblok components.

panda.config.ts


import { pandaStaticGenerator } from '@krakentech/coral-storyblok';
 
export default defineConfig({
    ...
    
    staticCss: {
        recipes: pandaStaticGenerator.recipes,
        css: pandaStaticGenerator.css,
    },
 
    ...
});

That’s it 🎉

Contributing

Since we want to version control the bloks structure in Storyblok, we need to regenerate their types when we make changes to them. Assuming you have access to coral storyblok space:

Make the changes to the bloks in Storyblok
Go to coral in your terminal, cd into packages/coral-storyblok
Run pnpm generate:storyblok-types. If it doesn’t work, you might not be logged in to Storyblok CLI, so run storyblok login and try again.
Make sure you only commit the changes that are related to what you’ve done in Storyblok (it might be that someone else made changes to other bloks in the meantime and they didn’t get merged yet)
Create a PR with those generated files, and a changeset file

Reporting issues / FAQ

Please report any feedback or issues to #coral-feedback , thanks!