In the previous article, we proceeded with a pure Next.js project with the stylesheet used by XM Cloud applied. This time, we will add Storybook to the project.
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2FtcxhdfpyJo5miQQmtuqNu%2Fd8e57fc083cec550dae3db013f38236f%2Flouis-hansel-Rf9eElW3Qxo-unsplash.jpg&w=3840&q=75)
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.
Install Storybook
Instructions for installing Storybook on Next.js can be found below.
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.
![xmc-components03.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F7620m4PvD8iPhwPTEXARcC%2F6a96d42e37463c638ce275bd83102886%2Fxmc-components03.png&w=3840&q=75)
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.
![xmc-components05.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3sH67kxvkUZNcmakZXAgSn%2Fa13a5aeed84c5633bbb14c15762d934e%2Fxmc-components05.png&w=3840&q=75)
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.
![xmc-components04.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F3O2i8dhFp2n27s2wxGOCDY%2Ffcbd3cbdcb1ca1927b30778d25e701cc%2Fxmc-components04.png&w=3840&q=75)
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.
![xmc-components05.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6BoNM6IqOmaqS5YjIWJuXC%2Fdf49e8661db2924599f5a27b0fd89508%2Fxmc-components05.png&w=3840&q=75)
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.