Storybook is an open source tool for front-end development. It is used especially for developing, testing, and documenting UI components. For more information, please visit the official website.

• Storybook

Install Storybook

Instructions for installing Storybook on Next.js can be found below.

• https://storybook.js.org/docs/get-started/nextjs

Let's follow the procedure. First, execute the following command

npx storybook@latest init

Once executed, the installer will add Storybook to the project. After a few moments, Storybook will launch.

The following folders have been added and files have been updated.

• .storybook
• src\stories
• .eslintrc.json
• .gitignore
• package.json

Stop the running environment once. Add a line to the Tailwind CSS content, this time to move the component under src/stories.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {},
  plugins: [],
};
export default config;

To start Storybook, use the following command.

npm run storybook

Add a new component

We will work on the RichText component so that it can be displayed like the Button shown in the sample.

Creating RichText.stories.ts

Copy the file src\stories\Button.stories.ts to create src\stories\RichText.stories.ts.

Creating RichText.tsx

Similarly, copy the file src\stories\Button.tsx and create a file src\stories\RichText.tsx.

Make the following changes to the file src\stories\RichText.tsx First, rename the stylesheet and Props.

import React from 'react';
import './button.css';

interface ButtonProps {


export const Button = ({
  primary = false,
  size = 'medium',
  backgroundColor,
  label,
  ...props
}: ButtonProps) => {

Rewrite this as follows

import React from 'react';
import '../button.css';

interface RichTextProps {


export const RichText = ({
  primary = false,
  size = 'medium',
  backgroundColor,
  label,
  ...props
}: RichTextProps) => {

Update RichText.stories.ts

For the stories file, update as follows

import { RichText } from './RichText';

const meta = {
  title: 'XMCloud/RichText',
  component: RichText,

} satisfies Meta<typeof RichText>;

If the above changes have been made, RichText will be added to the menu on the left side, as shown below.

Confirming the data to be retrieved by XM Cloud

What kind of data is XM Cloud's RichText component getting from Sitecore? To check this, add the following code to XM Cloud's src\tailwindcss\src\components\RichText.tsx

  console.log(props);

In the XM Cloud environment running in Docker, the above data is shown as logs in the tailwindcss-rendering container; in Visual Studio, right-click on the appropriate container and select View logs to see the logs in the terminal. The logs are displayed in the terminal.

With respect to the output data, this time it is as follows

{
  rendering: {
    uid: 'df81e62c-4d5d-4301-a24c-d90f76a81e20',
    componentName: 'RichText',
    dataSource: '/sitecore/content/Tailwindcss/Tailwindcss/Home/Data/Text 1',
    params: {
      GridParameters: 'basis-full',
      FieldNames: 'Default',
      DynamicPlaceholderId: '2'
    },
    fields: { Text: [Object] }
  },
  modifyComponentProps: [Function: modifyComponentProps],
  componentFactory: [Function (anonymous)],
  fields: {
    Text: {
      value: '<h1>Heading 1</h1>\n' +
        '<p>paragraph</p>\n' +
        '<h2>Heading 2</h2>\n' +
        '<p>paragraph</p>'
    }
  },
  params: {
    GridParameters: 'basis-full',
    FieldNames: 'Default',
    DynamicPlaceholderId: '2',
    styles: 'basis-full '
  }
}

Fine-tuning of Project

Add the sitecore-jss package to your Next.js project so that it can handle the data retrieved from XM Cloud above.

npm install -D @sitecore-jss/sitecore-jss-nextjs

You can now write your code using the Sitecore JSS package, replacing the RichText.tsx file in the SXA component for the src\stories\RichText.tsx file.

Next, the file src\stories\RichText.stories.ts is rewritten as follows, with the data acquired from XM Cloud prepared as a sample.

import type { Meta, StoryObj } from "@storybook/react";
import { Default as RichText } from "./RichText";

const meta = {
  title: "SXAStarter/RichText",
  component: RichText,
  tags: ["autodocs"],
  argTypes: {
    fields: { control: 'object' },
    params: { control: 'object' },
  },
} satisfies Meta<typeof RichText>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    fields: {
      Text: {
        value: '<h1>Heading 1</h1>\n<p>Paragraph</p>\n<h2>Heading 2</h2>\n<p>Paragraph</p>',
      },
    },
    params: {
      styles: 'basis-full'
    },
  },
};

In this state, the component does not load the Tailwind CSS stylesheet. To fix this, add the following code in .storybook\preview.ts.

import "../src/assets/globals.css";

This completes the preparation. After setup, we have verified that the system is working as follows.

Summary

We were able to display Next.js components created in XM Cloud without the XM Cloud environment. Also, by using the Storybook, we were able to see how the screen changes when the parameter values are changed. We were also able to check how the screen would change if we changed the parameter values.

In this case, in another Next.js project, I tried to make Headless SXA components displayable using Storybook. This sample is available in the following repository.

• https://github.com/haramizu/xmc-components

Tags

• Next.js