@vadzzim,
I got it to a workable point.
My main.js file is:
const path = require("path");
module.exports = {
stories: [
"../frontity/packages/mars-theme/src/**/*.stor@(y|ies).@(js|jsx|ts|tsx|mdx)",
"../documentation/**/*.stor@(y|ies).@(js|jsx|ts|tsx|mdx)",
"../frontity/packages/frontity-components/src/components/**/*.stor@(y|ies).@(js|jsx|ts|tsx|mdx)",
"../frontity/packages/wc/src/components/**/*.stor@(y|ies).@(js|jsx|ts|tsx|mdx)",
"../frontity/tailwind/**/*.stor@(y|ies).@(js|jsx|ts|tsx|mdx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-a11y",
"@storybook/addon-actions",
"storybook-formik/register",
// "@whitespace/storybook-addon-html/register",
],
webpackFinal: (config) => {
//https://duncanleung.com/emotion-css-prop-jsx-pragma-storybook/
config.module.rules[0].use[0].options.presets = [
require.resolve("@babel/preset-react"),
require.resolve("@babel/preset-env"),
require.resolve("@emotion/babel-preset-css-prop"),
];
// // Load images.
// {
// test: /\.(gif|jpe?g|png)$/,
// loader: 'url-loader?limit=25000',
// query: {
// limit: 10000,
// name: 'static/media/images/[name].[hash:8].[ext]'
// }
// },
// Frontity components are not compiled (!) so we have to make sure we compile them ourselves:
const tsRule = config.module.rules.find((rule) => /ts/.test(rule.test));
tsRule.exclude = /node_modules\/(?!(@frontity\/components|@frontity\/error|@frontity\/connect\/|@frontity\/hooks)\/).*/;
return config;
},
};
I needed to include babel.config.js
// Even though storybook doesn't require a babel config, Jest does.
// See https://jestjs.io/docs/en/tutorial-react
module.exports = {
presets: [
"@babel/preset-env",
"@babel/preset-typescript",
"@babel/preset-react",
],
plugins: ["macros"],
};
I also added a helper file: frontityUtils.js
/**
* External dependencies
*/
const merge = require("lodash.merge");
/**
* React / Frontity dependencies
*/
import React from "react";
import { Provider, createStore } from "@frontity/connect";
/**
* Internal dependencies
*/
import settings from "./sample-data/frontity.settings";
export function withFrontityStore(
stateOverrides = {},
defaultOverrides = {},
extra = {}
) {
// Deep merge instead of using pread operator (...) - as {state.theme} was getting overwritten.
// https://lodash.com/docs#merge
// https://www.javascripttutorial.net/object/javascript-merge-objects/#:~:text=JavaScript%20Merge%20Objects,-Summary%3A%20in%20this&text=To%20merge%20objects%20into%20a,assign()%20method
let state = {
...settings,
...{
router: {
link: "/",
},
},
};
merge(state, stateOverrides);
// Default actions taken from node_modules/@frontity/router/__tests__/index.test.ts
const defaultActions = {
router: {
/*eslint no-unused-vars: ["error", { "args": "none" }]*/
set: (state) => (link, options) => {
console.log("Link Clicked");
},
},
theme: {
toggleMobileMenu: () => {
console.log("toggleMobileMenu Action");
},
},
...defaultOverrides,
};
// We need to expose a store in order for frontity components to work:
// Mock store technique taken from frontity test suite: https://github.com/frontity/frontity/blob/83c5eadb4dffc6275fe4d93b8d379c21449a2727/packages/connect/src/__tests__/connect.tests.jsx#L11
const store = createStore({
state: state,
actions: defaultActions,
...extra,
});
// console.log("HELPER store", store);
// console.log("HELPER extra", extra);
// console.log("HELPER state", state);
// console.log("HELPER stateOverrides", stateOverrides);
return function (renderedComponent) {
return <Provider value={store}>{renderedComponent}</Provider>;
};
}
My preview.js file is:
import { withFrontityStore } from "./frontityUtils";
import { addDecorator } from "@storybook/react";
import { withConsole } from "@storybook/addon-console";
// import { withHTML } from "@whitespace/storybook-addon-html/react";
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
a11y: {
element: "#root",
config: {},
options: {},
manual: true,
},
};
// We need to expose a store in order for frontity components to work:
addDecorator((storyFn) => withFrontityStore()(storyFn()));
addDecorator((storyFn, context) => withConsole()(storyFn)(context));
// storybook-addon-html conflicts with storyshots (known issue: https://github.com/whitespace-se/storybook-addon-html/issues/5)
// so we only enable it if we're not testing:
// if (process.env.NODE_ENV !== "test") {
// addDecorator(withHTML);
// }
// addDecorator(withHTML);
A sample story overwritting the default state is:
import {
Meta,
Story,
Canvas,
ArgsTable,
Description,
} from "@storybook/addon-docs/blocks";
import MobileMenu from "../MobileMenu";
import { withFrontityStore } from "../../../../utils/frontityUtils.js";
const openModal = () =>
withFrontityStore({ theme: { isMobileMenuOpen: true } })(<MobileMenu />);
<Meta title="Components/Header/MobileMenu" component={MobileMenu} />
# MobileMenu
<Description of={MobileMenu} />
#
<Canvas>
<Story name="OpenMode">{openModal()}</Story>
</Canvas>
## Props
<ArgsTable of={MobileMenu} />
My current directory structure is:
Project
Project/.storybook
Project/wordpress-theme
Project/frontity
I still have a few issues, but am able to work around them until I’ve got more time to fix them.
If you give me access to your repository I can try to port my storybook setup there.
