@natu/storyblok-ui

Basic ready-to-use components.

The main foundations of this package:

In contrast to ui package components are not as generic as they're consuming Storyblok data
Components are very often reusing some generic components and works as the connector between the Storyblok data and pure UI components
Package already contains some basic components and should be extended when developing an app

ℹ️

Used in the web app.

Usage

Import package in package.json

"dependencies": {
    "@natu/storyblok-ui": "*",
}

Use `componentsMap` in Storyblok provider

apps/web/src/app/StoryblokProvider.tsx

import StoryblokBridgeLoader from '@storyblok/react/bridge-loader';
import { storyblokInit } from '@storyblok/react/rsc';
import React, { ReactNode } from 'react';
import { componentsMap } from '@natu/storyblok-ui';
 
storyblokInit({
  accessToken: ...,
  components: componentsMap,
});
 
interface StoryblokProviderProps {
  children?: ReactNode;
}
 
export const StoryblokProvider = ({ children }: StoryblokProviderProps) => (
  <>
    {children}
    <StoryblokBridgeLoader />
  </>
);

Components included

contentTypes

Render component wrapper with DynamicRender inside:

SBFooter - for <footer> component
SBHeader - for <header> component
SBPage - for generic page component.

elements

Render component with props:

SBColumn, SBContainer, SBGrid, SBRow - components for organizing content on page
SBCta - Button with Link
SBImage - ResponsiveImage wrapped in ConditionalLink and optional AspectRatio
SBRichtext - uses StoryblokRichtext
SBTable - uses Table
SBThemeModeSwitcher - uses ThemeModeSwitcher
SBTypography - uses Typography

Adding new components

To add new components, you need to create it in /src/components/elements folder and add them to the componentsMap file.

Create new component in `elements` folder

src/elements/SBNewComponent/SBNewComponent.tsx

import { SBProps, resolveStoryblokStyles, sbEditable } from '@natu/storyblok-utils';
 
interface SBNewComponentProps { ... }
 
export const SBNewComponent = ({ blok }: SBProps<SBNewComponentProps>) => {
  const { <props> } = blok;
  const className = resolveStoryblokStyles({ <stylesProps> });
 
  return (
    <div className={className} {...sbEditable(blok)}>
      // your component with props
    </div>
  );
};

Add new component in `componentsMap` file

src/componentsMap.ts

import { SBNewComponent } from './elements/SBNewComponent';
 
const elements = { ..., newComponent: SBNewComponent };
const contentTypes = { ... };
 
export const componentsMap: Record<string, unknown> = {
  ...elements,
  ...contentTypes,
};

Storyblok Setup Storyblok Utils