@natu/storyblok-setup

Script setting up predefined:

• datasources,
• blocks,
• stories

in Storyblok connected to the project.

Usage

This package is used only for initial setup of the Storyblok. Usage is covered in getting started instruction.

Files

Component Group

Sets the component groups in Storyblok. Groups created:

• atoms (for cta, image, richtext, table, themeModeSwitcher & typography components)
• molecules (for column & row components)
• organisms (for grid component)
• content type (for config, page & redirect components)
• layout (for footer & header components)
• seo (for seo component)
• templates (for container component)

Components

Sets the components in Storyblok. Items created:

• column, container, grid, row - to organize content on page
• config using footer & header - to handle header, footer and 404 page configuration
• cta, image, richtext, table, themeModeSwitcher, typography - to handle basic UI components
• page - content type to handle pages
• redirect - to handle redirects
• seo - to handle SEO.

Most of those component has its reflection in storyblok-ui package.

Datasource

Sets the datasources in Storyblok which are mainly the one source of truth for selection fields in components. Items created:

• Align items - align values (start/center/end/baseline)
• Container size - container sizes (full/1536px/1280px/768px)
• CTA - cta variants (default/destructive/secondary/...)
• Font family - font families (primary)
• Font size - font sizes (12px/14px/16px/...)
• Grid variants - grid variants (1-col/2-col/...)
• Justify items - justify values (start/center/end/...)
• Space - spacing values (8px/16px/24px/...)
• Text align - text align values (left/center/right/justify)

Env

Creates the .env file for an app. It's needed for further connecting with Storyblok for the data for an app.

Example of the .env file:

STORYBLOK_PERSONAL_ACCESS_TOKEN=
STORYBLOK_SPACE_ID=
# 'eu' | 'us'
STORYBLOK_REGION="eu"

Stories

Creates the stories in Storyblok. Items created:

• Home - homepage of an app
• Config folder.

Config folder contains:

• Config story - general, dark mode & seo settings
• Redirects folder - containing sample redirect
• Special pages folder - containing 404 page
• Layout folder - containing Header & Footer configurations.

Utils

All util functions which are used as helpers to create all the content mentioned above.

Setup.ts

The main file aggregating all the functionalities, is performed with node when using the yarn setup script of this package.

From the root of the project, run:

yarn storyblok:setup

From storyblok setup workspace, run:

yarn setup