npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@opensrp/form-config

v0.0.20

Published

OpenSrp form configuration components

Downloads

3

Readme

Form Config

These are bunch of components that support creation and manuplation of OpenSRP configuration files.

The configuration files include:

  1. JSON widget validator - JSON file that holds a list of fields that cannot be removed in a certain JSON form.
  2. Manifest - A combination of properties that help bundle up all the files uploaded.

Instalation

yarn add @opensrp/form-config

Code Sample

You can opt to use default table styles by this file to a higher component

import '@onaio/drill-down-table/dist/table.css';

Form upload and Edit

import ConnectedUploadConfigFile from '@opensrp/form-config'

const UploadConfigFilePage = () => {

    const props = {
        baseURL: <OpenSRP API base url>,
        draftFilesUrl: <draft files url>, // redirects here when form is upoaded
        endpoint: <OpenSRP API file upload endpoint>,
        formId: <form identifier>, // provided when editing else pass null
        isJsonValidator: <boolean>, // true when editing or creating a json validator
        getPayload: <function for generating OpenSrp API headers>,
        LoadingComponent: <loading component>, // optional
        validatorsUrl: <web link to json validators>,
    };
    return <ConnectedUploadConfigFile {...props} />
};

List manifest releases

import ConnectedManifestReleases from '@opensrp/form-config'

const ManifestReleasesPage = () => {

    const props = {
        baseURL: <OpenSRP API base url>,
        currentUrl: <current web url>,
        endpoint: <OpenSRP API manifest endpoint>,
        formUploadUrl: <form upload web url>
        getPayload: <function for generating OpenSrp API headers>,
        LoadingComponent: <loading component>, // optional
        uploadTypeUrl: <string>, // differentiate valdator and form upload  eg. form-upload or validator-upload
    };
    return <ConnectedManifestReleases {...props} />
};

If you would like to use the equivalent Antd components

Create the list view component

import { AntdReleaseList } from '@opensrp/form-config';

const { ReleaseList } = AntdReleaseList;

const ManifestReleasesPage = () => {
  const props = {
    uploadFileURL: '/drafts/upload', // route to navigate to upload a draft form
    viewReleaseURL: '/releases', // route to navigate to view a release record details
  };
  return <ReleaseList {...props} />;
};

Create the view component that displays a details record

import { AntdFilesList } from '@opensrp/form-config';

const { FileList } = AndFilesList;

const ManifestReleaseViewPage = () => {
  const props = {
    isJsonValidator: false,
  };
  return <FileList {...props} />;
};

Create the upload form component to upload a draft form

import { AntdUploadForm } from '@opensrp/form-config';

const { UploadForm } = AntdUploadForm;

const UploadDraftPage = () => {
  const props = {
    isJsonValidator: false, // true when editing or creating a json validator
    onSaveRedirectURL: '/drafts', // redirects here when form is upoaded
  };
  return <UploadForm {...props} />;
};

Declare routes

import { ROUTE_PARAM_FORM_VERSION } from '@opensrp/form-config';
// releases list view
<Route path="/releases">
  <ManifestReleasesPage />
</Route>;

// release record view
<Route path={`/releases/:${ROUTE_PARAM_FORM_VERSION}`}>
  <ManifestReleaseViewPage />
</Route>;

// upload draft view
<Route path="/drafts/upload">
  <UploadDraftPage />
</Route>;

List JSON validators and config forms

import ConnectedManifestFilesList from '@opensrp/form-config'

const JsonValidatorsPage = () => {

    const props = {
        baseURL: <OpenSRP API base url>,
        downloadEndPoint: <OpenSrp form download endpoint>
        endpoint: <OpenSRP API forms endpoint>,
        fileUploadUrl: <form upload web url>
        formVersion: <form version for configs to be displayed> // null for JSON validator
        getPayload: <function for generating OpenSrp API headers>,
        isJsonValidator: <true for JSON validator page>
        LoadingComponent: <loading component>, // optional
        uploadTypeUrl: <string>, // differentiate valdator and form upload  eg. form-upload or validator-upload
    };
    return <ConnectedManifestFilesList {...props} />
};

If you would like to use the equivalent Antd component

Create the list view component

import { AntdFilesList } from '@opensrp/form-config';

const { FileList } = AntdFilesList;

const JsonValidatorsPage = () => {
  const props = {
    uploadFileURL: '/json-validators/upload', // route to navigate to upload form
    isJsonValidator: true, // true for json validators page
  };
  return <FileList {...props} />;
};

Create the upload form component

import { AntdUploadForm } from '@opensrp/form-config';

const { UploadForm } = AntdUploadForm;

const UploadJsonValidatorPage = () => {
  const props = {
    isJsonValidator: true, // true when editing or creating a json validator
    onSaveRedirectURL: '/json-validators', // redirects here when form is upoaded
  };
  return <UploadForm {...props} />;
};

Declare routes

import { ROUTE_PARAM_FORM_ID } from '@opensrp/form-config';

// json validators list view
<Route path="/json-validators">
  <JsonValidatorsPage />
</Route>;

// edit route
<Route path={`/json-validators/upload/:${ROUTE_PARAM_FORM_ID}`}>
  <UploadJsonValidatorPage />
</Route>;

// upload route
<Route path="/json-validators/upload">
  <UploadJsonValidatorPage />
</Route>;

List Draft files

import ManifestDraftFiles from '@opensrp/form-config'

const DraftListPage = () => {

    const props = {
        baseURL: <OpenSRP API base url>,
        downloadEndPoint: <OpenSrp form download endpoint>
        endpoint: <OpenSRP API forms endpoint>,
        fileUploadUrl: <form upload web url>
        getPayload: <function for generating OpenSrp API headers>,
        LoadingComponent: <loading component>, // optional
        manifestEndPoint: <OpenSrp manifest endpoint>
        releasesUrl: <manifest release web url>
    };
    return <ManifestDraftFiles {...props} />
};

If you would like to use the equivalent Antd component

Create the list view component

import { AntdDraftFileList } from '@opensrp/form-config';

const { DraftList } = AntdDraftFileList;

const DraftListPage = () => {
  const props = {
    uploadFileURL: '/drafts/upload', // route to navigate to upload form
    onMakeReleaseRedirectURL: '/releases', // redirect url after release is made
  };
  return <ManifestDraftFiles {...props} />;
};

Create the upload form component

import { AntdUploadForm } from '@opensrp/form-config';

const { UploadForm } = AntdUploadForm;

const UploadDraftPage = () => {
  const props = {
    isJsonValidator: false, // true when editing or creating a json validator
    onSaveRedirectURL: '/drafts', // redirects here when form is upoaded
  };
  return <UploadForm {...props} />;
};

Declare routes

import { ROUTE_PARAM_FORM_ID } from '@opensrp/form-config';

// drafts list view
<Route path="/drafts">
  <JsonValidatorsPage />
</Route>;

// edit route
<Route path={`/drafts/upload/:${ROUTE_PARAM_FORM_ID}`}>
  <UploadJsonValidatorPage />
</Route>;

// upload route
<Route path="/drafts/upload">
  <UploadJsonValidatorPage />
</Route>;