<aside> 💡 It is highly recommended to first check the data model structure of your desired data source(s) and tailor your app features according to it, rather than making everything and then trying to force data to fit your custom needs.

</aside>

Stage One

stage-1 branch

Intended only for building ideas and design this stage offers only one option you can run your widget in → Storybook

Only two running scripts available in this stage:

"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"

There is no right or wrong here, except to imagine how to best suit your desired data source inside your widget.

Alongside App.stories.js for running your widget there is Docs.stories.js containing helper documentation to help guide you through the process. For styling you can use already pre-installed styled-components library, or you can use your preffered UI Library.

It’s important to avoid using any kind of ThemeProvider wrappers from third party styling libraries, since application is already wrapped inside PrifinaProvider.

import React from "react";
import { PrifinaProvider, PrifinaContext } from "@prifina/hooks";
import { MyWidget } from "./MyWidget";

export const LocalComponent = (props) => {
  return (
    <PrifinaProvider stage={"dev"} Context={PrifinaContext}>
      <MyWidget stage={"dev"} {...props} />
    </PrifinaProvider>
  );
};

Fixed Containers page of the story displays four fixed available widget sizes. Using variant prop choose your desired widget size

const App = () => {
  return (
    <Container variant="small">
      ...your widget content
    </Container>
  );
};

//small 300x300
//medium 616x616
//mediumVertical 300x616
//mediumHorizontal 616x300

Preview of custom size containers are available in Storybook for you to choose

Stage Two

stage-2 branch

<aside> ⚠️ Before continuing pull your work from stage-1 branch - git pull origin stage-1

</aside>

Here is where things become a bit more serious as you have the Webpack configuration added.

In this stage you can test out your widget settings, ****which ****allow you to control and interact with your widget. The best way to test if they work without being in sandbox environment is simply using Props.

Let’s say we have a city prop implemented inside widget that you’d like to allow users to interact with through widget settings:

const Widget = (props) => {
...

//declare props you want 
  const { city } = props;

  return (
   ...
 );
}

Update props in story file while you have webpack development environment running using start command

export const box = () => <Widget city="New York" />;
box.story = {
  name: "Widget",
};

Stage Three