Storybook - Framework7 Core difficulties

Questions
1

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

  1. 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;
}
  1. 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

2

Looks like it was working all along - I was getting a JS error that I somehow had missed.

1 Like