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

@pangeacyber/react-mui-store-file-viewer

v0.0.69

Published

An extension of material ui data-grid for Pangea store file objects

Downloads

343

Readme

documentation Discourse

Motivation

The Store Viewer can be used to search, view, and upload files or folders to your Pangea Secure Object Store.

An application using the Secure Object Store may also require that files are presented in the end application, because of this we made the file viewer React component that Pangea uses within its Console available as an NPM package, such that it could be embedded directly into other applications. The primary prop required is an API interface, which should contain callback handlers that handle making API requests to a server which proxies the Secure Object Store APIs. A proxy server is required because the service token from Pangea should not be embedded within a client.

The StoreFileViewer component is a React component built using the Material-UI (MUI) component library. MUI was used because it is the same component used within the Pangea Console.

Getting Started

Install Material-UI library and the AuditLogViewer NPM package.

npm

npm install @mui/material @emotion/react @emotion/styled @pangeacyber/react-mui-store-file-viewer

yarn

yarn add @mui/material @emotion/react @emotion/styled @pangeacyber/react-mui-store-file-viewer

Peer dependencies

Please note that react and react-dom are peer dependencies too:

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},

To learn more about Material-UI (MUI) check out their official documentation(https://mui.com/material-ui/getting-started/installation/).

StoreFileViewerProps Interface

Description

The StoreFileViewerProps interface defines properties for configuring a file viewer component that interacts with a Secure Object Store service through the provided StoreProxyApiRef.

Interface Definition

interface StoreFileViewerProps {
  children?: React.ReactNode;
  apiRef: StoreProxyApiRef;
  configurations?: StoreConfigurations;
  defaultFilter?: ObjectStore.Filter;
  defaultSort?: "asc" | "desc";
  defaultSortBy?: keyof ObjectStore.ObjectResponse;

  defaultVisibilityModel?: Record<string, boolean>;
  defaultColumnOrder?: string[];

  customizations?: StoreDataGridCustomizations;

  PangeaDataGridProps?: Partial<
    PangeaDataGridProps<ObjectStore.ObjectResponse>
  >;
}

Props

  • children (ReactNode, optional): Child components or elements.
  • apiRef (StoreProxyApiRef, required): Reference to the store proxy API for communication with the object store.
  • configurations (StoreConfigurations, optional): Configuration options for the file viewer.
  • defaultFilter (ObjectStore.Filter, optional): Default filter to apply to the file viewer.
  • defaultSort ("asc" | "desc", optional): Default sorting order for the file viewer.
  • defaultSortBy (keyof ObjectStore.ObjectResponse, optional): Default property to sort the file viewer by.
  • defaultVisibilityModel (Record<string, boolean>, optional): Default visibility model for elements in the file viewer.
  • customizations (StoreDataGridCustomizations, optional): Provide customization to rendered grid columns
  • defaultColumnOrder (string[], optional): Default order of columns in the file viewer.
  • includeIdColumn (boolean, optional): Toggle whether to include the object id as an new column. Defaulted to false;
  • PangeaDataGridProps (Partial<PangeaDataGridProps<ObjectStore.ObjectResponse>>, optional): Customization options for the internal PangeaDataGrid component used by the StoreFileViewer. From @pangeacyber/react-mui-shared.

StoreProxyApiRef Interface

Description

The StoreProxyApiRef interface defines methods and properties for interacting with a store proxy API. It includes functions for listing, getting, archiving, sharing, deleting, updating, uploading, and creating folders in the object store.

Only list and get are required to run the StoreFileViewer.

Interface Definition

interface StoreProxyApiRef {
  list:
    | ((
        data: ObjectStore.ListRequest
      ) => Promise<PangeaResponse<ObjectStore.ListResponse>>)
    | undefined;
  get:
    | ((
        data: ObjectStore.GetRequest
      ) => Promise<PangeaResponse<ObjectStore.GetResponse>>)
    | undefined;

  getArchive?:
    | ((
        data: ObjectStore.GetArchiveRequest
      ) => Promise<PangeaResponse<ObjectStore.GetArchiveResponse>>)
    | undefined;

  share?: {
    list?: (
      data: ObjectStore.ListRequest
    ) => Promise<PangeaResponse<ObjectStore.ShareListResponse>>;
    get?: (
      data: ObjectStore.ShareGetRequest
    ) => Promise<PangeaResponse<ObjectStore.ShareObjectResponse>>;
    delete?: (data: ObjectStore.ShareDeleteRequest) => Promise<PangeaResponse>;
    create?: (
      data: ObjectStore.ShareCreateRequest
    ) => Promise<PangeaResponse<ObjectStore.SharesObjectResponse>>;
    send?: (
      data: ObjectStore.ShareSendRequest
    ) => Promise<PangeaResponse<ObjectStore.ShareSendResponse>>;
  };

  delete?: (
    data: ObjectStore.DeleteRequest
  ) => Promise<PangeaResponse<ObjectStore.DeleteResponse>>;
  update?: (
    data: ObjectStore.UpdateRequest
  ) => Promise<PangeaResponse<ObjectStore.UpdateResponse>>;

  upload?: (
    data: FormData,
    contentType: "multipart/form-data"
  ) => Promise<PangeaResponse<ObjectStore.PutResponse>>;
  folderCreate?: (
    data: ObjectStore.FolderCreateRequest
  ) => Promise<PangeaResponse<ObjectStore.FolderCreateResponse>>;
}

For a deeper dive into the Prop interface check the source code here.

Example

The following is brief example for how to initialize the AuditLogViewer component.

import React from "react";
import {
  StoreProxyApiRef,
  StoreFileViewer,
} from "@pangeacyber/react-mui-store-file-viewer";

const storeCallbackHandler: StoreProxyApiRef = {
  get: async (data) => {
    const response = await api.storeGet(data);
    return response;
  },
  list: async (data) => {
    const response = await api.storeList(data);
    return response;
  },
};

const MyComponent: React.FC = () => {
  return <StoreFileViewer apiRef={storeCallbackHandler} />;
};

Customization

The StoreFileViewer component uses the Material-UI component library, so styling of the component can be controlled through a MUI Theme. See Theming documentation here

What to apply your Pangea branding to your end application? Check out the @pangeacyber/react-mui-branding NPM package here. The BrandingThemeProvider can fetch your Pangea Projects Branding and apply the styling to a Material-UI Theme.

API Reference

Store Service API's(https://pangea.cloud/docs/api/store)

Development

First, run the development server:

yarn install
yarn storybook

The StoreFileViewer.stories.tsx storybook example does not use mock files to render the StoreFileViewer instead it will read a .env file to hit your Store Service Config.

Retrieve your Secure Object Store service token, client token and domain from the Pangea Console Store service dashboard and add the following to a .env file. The environment file is git ignored.

STORYBOOK_PANGEA_TOKEN = "{SERVICE_TOKEN}"
STORYBOOK_CLIENT_TOKEN = "{CLIENT_TOKEN}"
STORYBOOK_SERVICE_DOMAIN = "{DOMAIN}"

Open http://localhost:6060 with your browser to view the component storybook