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

@gloojs/core-ui

v2.2.1

Published

Shared components for internal and external gloo projects

Downloads

392

Readme

core-ui Navigation

Navigation is a shared, consistent navbar component for all new Gloo applications.

| Mobile | Desktop | | -------- | -------- | | | |

Usage

$ npm i @gloojs/core-ui --save

# or

$ yarn add @gloojs/core-ui

# Install peerDependencies
npx install-peerdeps @gloojs/core-ui --auth $NPM_TOKEN

Gloo API Proxy

The Navigation component initiates REST API calls using the config passed via the client prop. For these API calls to succeed, your application server needs to proxy those request to the backend services. It is recommended to use the glooApiProxyMiddleware for this purpose.

Design limitations

Due to design wishes, Navigation is always fixed at the top of the page. Because of this, Navigation exports it's height as a static property, Navigation.height.

Organizations and Locations in Navigation

There are cases when you may not need to control current location because your application is working only on organization level, in these cases you can pass in only your organizationId and the organization/location dropdown changes to only display organizations. When you need to be able to switch between locations it's sufficient to pass in only the locationId prop. We can derive the current organization from the location.

If no valid location/organization is passed to Navigation, the dropdown will be hidden.

Example

import { Navigation, createClient } from "@gloojs/core-ui";
import { useRouter } from "next/router";

const client = createClient({ baseURL: "/gloo-api" });

function App(props) {
  const router = useRouter();
  const isAdmin = router.query.page === "admin";

  const changeRoute = (e, id) => {
    e.preventDefault();
    router.push(`${router.pathname}?id=${id}`);
  };

  const links = [
    {
      text: "People",
      href: "#people",
      onClick: () => {}
    },
    {
      text: "Dashboards",
      href: "#dashboards"
    }
  ];

  const config = {
    onLocationChange: (e, { locId, orgId }) => changeRoute(e, locId),
    onOrganizationChange: (e, { orgId, locId }) => changeRoute(e, orgId),
    getLocationHref: locId => `/app?id=${locId}`,
    getOrganizationHref: orgId => `/app?id=${orgId}`,
    signOutLink: "/logout",
    onSignOutClick: () => console.log("Logged out"),
    applicationContext: {
      name: "Home",
      onClick: () => console.log("clicked home"),
      href: "/",
      logoSrc: "https://assets.gloo.us/design/some-cool-logo.png"
    },
    links,
    appDomain: process.env.APP_DOMAIN
  };

  const organization = useMemo(() => ({ id: router.query.id }), [
    router.query.id
  ]);

  const orgProps = isAdmin
    ? { organizationId: organization.id }
    : { locationId: organization.id };

  return (
    <div styles={{paddingTop: `${Navigation.height}px`}}>
      <Navigation config={config} {...orgProps} />
    </div>
  );
}

export default App;

Props

organizationId

string | default: undefined

Used to control currently selected organization.

locationId

string | default: undefined

Used to control currently selected location.

client

function(options: RequestConfig) | Required

Used to configure axios client instance.

config

object | Required

More detailed description of all props within config is detailed under here.

disableOrgSwitching

boolean | default: false

Switch off/enable organization switching dropdown.


onLocationChange

function(e: Event, {locId: string, orgId: string}) | default: () => {/* noop */}

Called when location is changed in the locations dropdown, can be used to run side-effects such as programmatic route changes or logging. Returns the click event and the new current location and organization.

onOrganizationChange

function(e: Event, {locId: string, orgId: string}) | default: () => {/* noop */}

Called when organization is changed in the organizations dropdown, can be used to run side-effects such as programmatic route changes or logging. Returns the click event and the new current location and organization. Location defaults to the first location of the current organization.

getLocationHref

function(locationId: string) | Required

Used to construct a link for the location list items.

getOrganizationHref

function(organizationId: string) | Required

Used to construct a link for the organization list items.

signOutLink

string | Required

Link for sign out page.

onSignOutClick

function() | default: () => {/* noop */}

Can be used to perform side effects when signing out.

applicationContext

object | Required

Configure information about the current gloo application.

| Prop | Type | Description | | -------- | -------- | -------- | |name|string, required | Name of the current application. I.e Home, Admin, etc.| |href|string, required | Link to the index page of the current application. | |onClick|function() | Perform side-effects when clicking link to application index. | |logoSrc|string, required | Link to logo used for application. |

links

array | default: undefined

Links to be shown on the navigation bar.

| Prop | Type | Description | | -------- | -------- | -------- | |text|string, required | Text on link | |href|string, required | Link href. | |onClick|function() | Perform side-effects when clicking link. |

appDomain

string | Required

Example - dev.gloo.us / gloo.us

Used to configure environment on links, make sure you're using production env for deployed applications.

environmentBaseUrl

This config value is not supported in version 2.0.0 and later

This config value is deprecated! - Please use the appDomain config value

string

Used to configure environment on links, make sure you're using production env for deployed applications.

allowedOrganizationTypes

array of string | default: undefined

Restrict the organization dropdown to only organizations of the specified types, e.g. NETWORK.

accountMenuLinks

array | default: undefined

Links to be shown in the Account Dropdown between the Administration and Sign Out links.

| Prop | Type | Description | | -------- | -------- | -------- | |text|string, required | Text on link | |href|string, required | Link href. |