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

@bitpod/p10-platform-bar

v2.0.4-alpha

Published

p10 platform bar

Downloads

143

Readme

p10 platformbar

How to install

Before using platform bar, you need to build platformbar bundle files.

  • To create platform bar bundle files,
    • open command prompt move to platformbar root folder where package.json is present.
    • fire npm install (Note you need to have node.js installed on your system) command.
  • After npm install is complete,
    • fire webpack command, after this command you will find the build js files and related files in dist folder.
  • If you want to render Platformbar as a component in React Application use platformbar.p10platformbar.js and platformbar.css, for other JS Applications use show showplatformbar.p10platformbar.js and showplatformbar.css

USE in react Application

  • To use Application in react Application environment import {PlatformBar,PlatformServices} from 'platformbar.p10platformbar.js'.
  • Before using p10platformbar you need to initialize the PlatformService Api(Promise based API, generally called in componentWillMount) which requires following params:
    PlatformServices.initialize({
    	client_id: "",
    	client_secret: "",
    	authorizationUrl: "",
    	authorizationToken:"",
    	authorizationlogoutUrl:"",
    	authorizationuserInfoUrl:"",
    	codeFlowEndPoint:{
    		authenticateURL:"",
    		tokenURL:"",
    		refreshTokenURL:"",
    		logoutURL:""
    	},
    	stateVariable: "",
    	serviceApiUrl:"",
    	logout_redirect_url: "",
    	login_redirect_url: "",
    	flowType:"",
    	hostLabel:"",
    	search:{
    		onsearchrequest:function,
    		searchresults:{
    			labelField:"",
    			keyField:""
    		},
    		onsearchresultselect:function
    	},
    	on_auth_state_change: function
    })
  • Params Description:
    1. client_id : client id (String) (required)
    2. client_secret : client secret (String) (required)
    3. authorizationUrl : auth url (String) (required when using implicit flow)
    4. authorizationToken : authorization token endpoint (String) (required when using implicit flow)
    5. authorizationlogoutUrl : oauth server logout endpoint (String) (required when using implicit flow)
    6. authorizationuserInfoUrl : oauth server profile endpoint (String) (required)
    7. codeFlowEndPoint : if application is using auth code flow then endpoints are defined by this object. (object) (required when usin auth code flow)
      • authenticateURL : takes the authentication/login endpoint of passport server (String) (required)
      • tokenURL : passport server endpoint to return token (String)(required)
      • refreshTokenURL : passport server endpoint to return refresh-token (String) (required)
      • logoutURL : passport server logout endpoint (String)(required)
    8. stateVariable : variable name to maintain state when using implicit flow (String) (required when using implicit flow)
    9. serviceApiUrl : platform services api url link (String) (required)
    10. logout_redirect_url : redirect url after user logouts (String) (required when using implicit flow)
    11. login_redirect_url : redirect url after user logins (String) (required)
    12. flowType: enum to initialize platform bar with the type of flow (values: "code" || "token") (String) (required)
    13. hostLabel : Any sample label text application wants to show on platform bar, generally Application name (String) (optional)
    14. search : If application want to use search bar from p10platform then include this param (object) (optional)
      • onsearchrequest : takes a function which is called whenever user types a text in searchbar, type text is passed as param to the function. (function) (required)
      • searchresults : search result provides the keys of label and key field of the search result. (object) (required)
      • onsearchresultselect : takes a function which is called when use selects a result, passing the key as first param, and selected item as the second.(function) (required)
    15. on_auth_state_change : takes a function which is called whenever user login or logout of application. If user logins a state object is passed as param, if user logouts null is passed as param. (function) (required)
  • After initializing p10 platformbar you can render p10 platform bar by Rendering as a jsx component.

USE in JS Application

  • To use Application in JS environment include 'showplatformbar.p10platformbar.js' file in your application.

  • After including file you will get a global object p10platformbar then you need to call platform services api initialize method.

    p10platformbar.PlatformServices.initialize({
    	client_id: "",
    	client_secret: "",
    	authorizationUrl: "",
    	logout_redirect_url: "",
    	login_redirect_url: "",
    	hostLabel:"",
    	search:{
    		onsearchrequest:function,
    		searchresults:{
    			labelField:"",
    			keyField:""
    		},
    		onsearchresultselect:function
    	},
    	on_auth_state_change: function
    })
  • Params Description:

    1. client_id : client id (String) (required)
    2. client_secret : client secret (String) (required)
    3. authorizationUrl : auth url (String) (required when using implicit flow)
    4. authorizationToken : authorization token endpoint (String) (required when using implicit flow)
    5. authorizationlogoutUrl : oauth server logout endpoint (String) (required when using implicit flow)
    6. authorizationuserInfoUrl : oauth server profile endpoint (String) (required)
    7. codeFlowEndPoint : if application is using auth code flow then endpoints are defined by this object. (object) (required when usin auth code flow)
      • authenticateURL : takes the authentication/login endpoint of passport server (String) (required)
      • tokenURL : passport server endpoint to return token (String)(required)
      • refreshTokenURL : passport server endpoint to return refresh-token (String) (required)
      • logoutURL : passport server logout endpoint (String)(required)
    8. stateVariable : variable name to maintain state when using implicit flow (String) (required when using implicit flow)
    9. serviceApiUrl : platform services api url link (String) (required)
    10. logout_redirect_url : redirect url after user logouts (String) (required when using implicit flow)
    11. login_redirect_url : redirect url after user logins (String) (required)
    12. flowType: enum to initialize platform bar with the type of flow (values: "code" || "token") (String) (required)
    13. hostLabel : Any sample label text application wants to show on platform bar, generally Application name (String) (optional)
    14. search : If application want to use search bar from p10platform then include this param (object) (optional)
      • onsearchrequest : takes a function which is called whenever user types a text in searchbar, type text is passed as param to the function. (function) (required)
      • searchresults : search result provides the keys of label and key field of the search result. (object) (required)
      • onsearchresultselect : takes a function which is called when use selects a result, passing the key as first param, and selected item as the second.(function) (required)
    15. on_auth_state_change : takes a function which is called whenever user login or logout of application. If user logins a state object is passed as param, if user logouts null is passed as param. (function) (required)
  • After initializing p10 platformbar you can render p10 platform bar by calling p10platformbar.mountPlatformbar() function by providing, element in which platform bar is to be rendered and props.

    e.g.: p10platformbar.mountPlatformbar(document.getElementById("App"),{});