Prifina Developer Docs

💡

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.

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>
  );
};

App.js

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

App.js

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

Stage Two

stage-2 branch

⚠️

Before continuing pull your work from stage-1 branch - git pull origin stage-1

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 (
   ...
 );
}

App.js

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",
};

App.stories.js

Stage Three

stage-3 branch

⚠️

Before continuing pull your work from stage-2 branch - git pull origin stage-2

💡

Stage three has ESLint configured to help you push cleaner code. Run eslint wiht yarn eslint . command.

The purpose of this stage is to inject real data in your application to see it come to life and also to finalize everything so you are ready to compress the project and get it inside AppStudio.

Designated places for assets and manifest.json are pre-made. Place all your screenshots and assets to be reviewed in the process of uploading your project in AppStudio. The manifest file will act like an id card of your project - containing all the necessary information about it.

Manifest Instructions

📢

Improve This Doc?

Widget Development

Stage One

Stage Two

Stage Three