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

@arteneo/forge

v4.0.0

Published

Forge

Downloads

167

Readme

Future plans

Read more in Unfinished components

Development

  1. Install dependencies using npm install.
  2. Build package using npm run build.
  3. Update version in package.json.
  4. Commit and push changes.
  5. Publish package using npm publish.

Branches

You can use following branches:

  1. main (default) - branch for current version 4.x
  2. v3 - branch for version 3.x
  3. v2 - branch for version 2.x
  4. v1 - branch for version 1.x

Table functionality

Toolbar

Batch actions

You can enable batch select (selectable rows via checkboxes in the table) by passing enableBatchSelect: true to <Table /> component.

There are following components available:

  • BatchAlertConfirm: Uses DialogBatchAlertConfirm which shows an Alert and uses DialogBatchButtonEndpoint (single endpoint)
  • BatchAlertConfirmMulti: Uses DialogBatchAlertConfirmMulti which shows an Alert and uses DialogBatchButtonMultiEndpoint (multiple endpoints one by one)
  • BatchConfirm: Uses DialogBatchConfirm which needs children and uses DialogBatchButtonEndpoint (single endpoint)
  • BatchConfirmMulti: Uses DialogBatchConfirmMulti which needs children and uses DialogBatchButtonMultiEndpoint (multiple endpoints one by one)
  • BatchForm: Uses DialogBatchFormFieldset which needs fields (single endpoint)
  • BatchFormAlert: Uses DialogBatchFormAlertFieldset which shows an Alert and needs fields (single endpoint)
  • BatchFormMulti: Uses DialogBatchFormMultiFieldset which needs fields (multiple endpoints based on form values)
  • BatchFormMultiAlert: Uses DialogBatchFormMultiAlertFieldset which shows an Alert and needs fields (multiple endpoints based on form values)

Example BatchAlertConfirm usage.

import React from "react";
import { Optional, BatchAlertConfirm, BatchAlertConfirmProps } from "@arteneo/forge";

type BatchDisableProps = Optional<BatchAlertConfirmProps, "dialogProps">;

const BatchDisable = (props: BatchDisableProps) => {
    return (
        <BatchAlertConfirm
            {...{
                label: "batch.device.disable.action",
                ...props,
                dialogProps: {
                    label: "batch.device.disable.label",
                    ...props.dialogProps,
                    confirmProps: {
                        endpoint: "/device/batch/disable",
                        ...props.dialogProps?.confirmProps,
                    },
                },
            }}
        />
    );
};

export default BatchDisable;
export { BatchDisableProps };

Example BatchAlertConfirmMulti usage.

import React from "react";
import { Optional, BatchAlertConfirmMulti, BatchAlertConfirmMultiProps } from "@arteneo/forge";

type BatchEnableProps = Optional<BatchAlertConfirmMultiProps, "dialogProps">;

const BatchEnable = (props: BatchEnableProps) => {
    return (
        <BatchAlertConfirmMulti
            {...{
                label: "batch.device.enable.action",
                ...props,
                dialogProps: {
                    label: "batch.device.enable.label",
                    ...props.dialogProps,
                    confirmProps: {
                        endpoint: (result) => "/device/" + result.id + "/enable",
                        resultDenyKey: "enable",
                        ...props.dialogProps?.confirmProps,
                    },
                },
            }}
        />
    );
};

export default BatchEnable;
export { BatchEnableProps };

Example BatchFormAlert usage.

import React from "react";
import { Optional, BatchFormAlert, BatchFormAlertProps, Text } from "@arteneo/forge";

type BatchVariableAddProps = Optional<BatchFormAlertProps, "dialogProps">;

const BatchVariableAdd = (props: BatchVariableAddProps) => {
    return (
        <BatchFormAlert
            {...{
                label: "batch.device.variableAdd.action",
                ...props,
                dialogProps: {
                    title: "batch.device.variableAdd.title",
                    label: "batch.device.variableAdd.label",
                    formProps: {
                        fields: {
                            name: <Text {...{ required: true }} />,
                        },
                        endpoint: "/device/batch/variable/add",
                    },
                    ...props.dialogProps,
                },
            }}
        />
    );
};

export default BatchVariableAdd;
export { BatchVariableAddProps };

Example BatchFormMultiAlert usage.

import React from "react";
import { Optional, BatchFormMultiAlert, BatchFormMultiAlertProps, Text } from "@arteneo/forge";

type BatchTemplateApplyProps = Optional<BatchFormMultiAlertProps, "dialogProps">;

const BatchTemplateApply = (props: BatchTemplateApplyProps) => {
    return (
        <BatchFormMultiAlert
            {...{
                label: "batch.device.templateApply.action",
                ...props,
                dialogProps: {
                    title: "batch.device.templateApply.title",
                    label: "batch.device.templateApply.label",
                    formProps: {
                        resultDenyKey: "templateApply",
                        fields: {
                            name: <Text {...{ required: true }} />,
                        },
                        endpoint: (result) => "/device/" + result.id + "/template/apply",
                    },
                    ...props.dialogProps,
                },
            }}
        />
    );
};

export default BatchTemplateApply;
export { BatchTemplateApplyProps };

Dialogs component overview

DialogProvider -> Utility context with initialization. Presenting children inside of a Dialog

Dialog -> Basic Dialog content setup: Title, Content, Actions DialogTitle -> Presentation component. Needs title (can be resolved using payload) DialogContent -> Presentation component. Shows loader when initializing otherwise children. Needs children (can be resolved using payload) DialogContentLoader -> Presentation component. Presents loader DialogActions -> Presentation component. Shows close button on the left and any passed actions buttons on the right (optionally resolved using payload)

DialogAlert -> Extends Dialog. Presents Alert (needs label which can be optionally resolved using payload) DialogAlertConfirm -> Adds DialogButtonEndpoint in actions to DialogAlert DialogConfirm -> Dialog with action button endpoint action (needs children)

DialogBatch -> Basic DialogBatch content setup: Title, DialogBatchContent, Actions DialogBatchContent -> Presentation component. Shows loader when initializing otherwise children and below DialogBatchProgress and DialogBatchResults. Needs children (can be resolved using payload) DialogBatchProgress -> Presentation component. Shows linear progress based on processed number of batchResults. DialogBatchResults -> Presentation component. Shows batchResults with status as rows.

DialogBatchAlert -> Extends DialogBatch. Presents Alert (needs label which can be optionally resolved using payload) DialogBatchConfirm -> DialogBatch with action DialogBatchButtonEndpoint action (needs children) DialogBatchAlertConfirm -> Adds DialogBatchButtonEndpoint in actions to DialogBatchAlert DialogBatchConfirmMulti -> DialogBatch with action DialogButtonMultiEndpoint action (needs children) DialogBatchAlertConfirmMulti -> Adds DialogButtonMultiEndpoint in actions to DialogBatchAlert

DialogButtonClose -> Overrides default onClick and adds onClose as parameter DialogButtonSubmit -> Adds default type: "submit" and loading and disabled states DialogButtonEndpoint -> Adjusts ButtonEndpoint (single endpoint) to Dialog by incorporating onClose to onSuccess and onCatch. Adds disable while initializing DialogBatchButtonMultiEndpoint -> Adjusts ButtonMultiEndpoint (multiple endpoints one by one) to DialogBatch by managing processing, finished and batchResults states through onStart, onFinish, onSuccess and onCatch. Adds disable while initializing or not finished. DialogBatchButtonEndpoint -> Adjusts DialogButtonEndpoint (single endpoint) to DialogBatch. It assumes that endpoint will return multiple batchResults in response.

DialogBatchForm -> Basic batch form in dialog component (sends endpoint and assumes that it will return multiple batchResults in response). Adds DialogButtonSubmit. (needs children which should include fields) DialogBatchFormFieldset -> Extends DialogBatchForm. Presents fields in a specific way. (does not need children) DialogBatchFormAlertFieldset -> Extends DialogBatchForm. Presents alert and fields in a specific way. (does not need children)

DialogBatchFormMulti -> Basic batch form multi in dialog component (multiple endpoints based on form values). Adds DialogButtonSubmit. (needs children which should include fields) DialogBatchFormMultiFieldset -> Extends DialogBatchFormMulti. Presents fields in a specific way. (does not need children) DialogBatchFormMultiAlertFieldset -> Extends DialogBatchFormMulti. Presents alert and fields in a specific way. (does not need children)

DialogForm -> Basic form in dialog component. Adds DialogButtonSubmit. (needs children which should include fields) DialogFormFieldset -> Extends DialogForm. Presents fields in a specific way. (does not need children)