Storyblok Tools

Installation

Make sure you have Node >= 18.0.0 installed.

$ npm i @slvrio/storyblok

Generate TypeScript Type Definitions

The generateTypescriptTypedefs function creates a TypeScript definitions file based on the provided Storyblok component schemas. It also returns the generated TypeScript types as a string.

Example Usage

import { generateTypescriptTypedefs } from '@slvrio/storyblok'

const tsTypes = await generateTypescriptTypedefs({
  jsonSchemas: [
    /* Your Storyblok JSON schemas */
  ],
  destinationFilePath: './types/storyblok-types.d.ts',
  typeNamesPrefix: 'MyPrefix',
  typeNamesSuffix: 'Storyblok',
  JSONSchemaToTSCustomOptions: { additionalProperties: false },
})

console.log(tsTypes) // Logs the generated TypeScript types as a string

Options

• jsonSchemas (required): An array of Storyblok JSON schemas.
• destinationFilePath (optional, default: storyblok-component-types.d.ts): Path to the generated TypeScript file.
• typeNamesPrefix (optional): A prefix for all generated type names.
• typeNamesSuffix (optional, default: Storyblok): A suffix for all generated type names.
• JSONSchemaToTSCustomOptions (optional): Custom options for the json-schema-to-typescript library.
• customFieldTypesParserPath (optional): Path to a script that defines custom field type parsing logic.

JSON Schema to TypeScript Options

This library uses json-schema-to-typescript under the hood. You can customize its behavior by passing a JSON file with configuration options.

Example JSON configuration to disable additionalProperties:

{
  "additionalProperties": false
}

Custom Field Types Parser

Storyblok Custom Field Types do not have inherent JSONSchema definitions. You can provide a parser function that maps Custom Field Types to JSONSchema.

Example parser implementation:

export default function (key, obj) {
  switch (obj.field_type) {
    case 'my-custom-field-type-name':
      return {
        [key]: {
          type: 'object',
          properties: {
            color: { type: 'string' },
          },
          required: ['color'],
        },
      }
    default:
      return {}
  }
}

This function should be provided via the customFieldTypesParserPath option.