Hey there,
I am trying to set up storybook with Framework7 Core (Not using React/Vue e.t.c)
So far I have my config working where Storybook boots up, however I am not having much luck with getting my views to display on Storybook. I encouter the following issues
- Framework7 has already been initialized (I got around this one by creating a wrapper)
var app = null; export default function CreateWrapper(route, option) { if(app) return app; app = new Framework7({ root: '#app', routes: [ path: '/', ...route ], .... }); return app; }
- My storyboard view is blank. I am forced to return HTML, my storyboard ends up looking like this.
setTimeout(() => { const f7 = Framework7Wrapper({ name: "dashboard", async: function (routeTo, routeFrom, resolve, reject) { const contextData = ...data... resolve( { component: DashboardPage, }, { contextData, } ); }, }); }, 150); return `<div id="app"></div>`;
If there is a guide some-where, or if anyone can provide any hints that would be great. If I figure out how to resolve this, I will post my solution in this topic.
Thank you very much.
EDIT: Here is my full solution in case anyone else wants to do the same.
You will need to create preview-body.html in the .storybook folder, mine has the following content: <div id="app"></div>
I have a Framework7Wrapper.js file
Framework7Wrapper.js
import $$ from 'dom7'; import Framework7 from "framework7"; import 'framework7/css/framework7.bundle.css'; import 'framework7-icons'; // Import Icons and App Custom Styles import '../../css/icons.css'; import '../../css/app.scss'; // Import main app component import App from '../../app.f7.html'; var app = null; var viewCount = 1; export default function CreateWrapper(route, option = {darkTheme: false}) { if(app) { app.view.current.routes.push({ path: `/${viewCount}`, name: `view_${viewCount}`, ...route }); $$('.theme-dark, .theme-light, html'). removeClass("theme-dark theme-light"). addClass('theme-' + (option.darkTheme ? "dark" : "light")); app.view.current.router.navigate({name: `view_${viewCount}`}); viewCount++; return app; } app = new Framework7({ root: '#app', // App root element component: App, // App main component id: 'mit.formitize', // App bundle ID name: 'Formitize', // App name theme: 'md', // App routes routes: [{ path: '/', ...route }], autoDarkTheme: "auto", input: { scrollIntoViewOnFocus: Framework7.device.cordova && !Framework7.device.electron, scrollIntoViewCentered: Framework7.device.cordova && !Framework7.device.electron, }, statusbar: { iosOverlaysWebView: true, androidOverlaysWebView: false, }, on: { init: function () { $$('.theme-dark, .theme-light, html'). removeClass("theme-dark theme-light"). addClass('theme-' + (option.darkTheme ? "dark" : "light")) } }, }); return app; };
And my stories tend to look like this
import Page from "./list"; import Framework7Wrapper from "../../../js/Storybook/Framework7Wrapper"; const Template = (args) => { // You can either use a function to create DOM elements or use a plain html string! // return `<div>${label}</div>`; Framework7Wrapper({ "async": async (routeTo, routeFrom, resolve, reject) => { let jobs = await GenerateJobList(); const context = { jobs }; resolve( { component: Page }, { context } ); } }, args); return ''; }; export const Primary = Template.bind({}); Primary.args = { darkTheme: false, }; export const DarkTheme = Template.bind({}); DarkTheme.args = { darkTheme: true, };
So far so good!
P.S I am coming from Framework7 v1 all the way to v5, the new changes are very exciting