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

react-entity-editor

v0.13.0

Published

React Entity Editor is a small set of React components that make it easier and cleaner to set up editor UIs, by abstracting away several patterns that commonly occur in editors.

Downloads

42

Readme

react-entity-editor

Never ready!™

Early stages of development, please prepare for large amounts of changes until version 1.0.0.

React Entity Editor is a small set of React components that make it easier and cleaner to set up editor UIs, by abstracting away several patterns that commonly occur in editors.

It doesn't give you any UI components like forms. Instead it sits above your user input components, providing them with actions that the user can trigger, adding user interaction flow such as confirmation prompts and success messages, and mapping those actions to operations on the underlying data. It's also fully compatible with redux.

What does it help with?

  • User actions and UI flow

    You'll usually want to ensure that the user is warned before deleting an item, or that they receive visual feedback after an item has been successfully saved. React Entity Editor provides an easy, declarative way of configuring the series of confirmations and status notifications involved with each type of user action, and comes with a default configuration that should suit most editors. Read more about actions, workflows and tasks TODO.

  • Declarative configuration

    Each editor is configured almost entirely in a single config file, including the definition of all operations that may take place in your editor (e.g. requests to create, update or delete items), and any parts of the configuration can be added to or overridden as needed. Read more about EntityEditorConfig TODO.

  • Keeping track of requests

    React Entity Editor keeps knowledge of the state of each async operation, whether they are pending, successful or have errored, and makes this available to you via props. And regardless of whether an operation is synchronous or asynchronous, the code you write for React Entity Editor doesn't have to change.

  • Prompts and modals

    React Entity Editor comes with a modal (using react-modal TODO) that already works with the UI flow setup, just add CSS for it. Or if you need more control you can provide your own, or choose to work with its props directly.

Installation

yarn add react-entity-editor or npm install react-entity-editor

Getting Started

Most of entity editor's functionality is applied to your editor component via the EntityEditor higher order component.

import React, {Component} from 'react';
import {EntityEditor} from 'react-entity-editor';
import Config from './ExampleEntityEditorConfig';

class ExampleEditor extends Component {
    render() {
        return <div>Your editor goes here</div>;
    }
}

const withEntityEditor = EntityEditor(Config);
export default withEntityEditor(ExampleEditor);

All functions that you want to be able to call from Entity Editor's operations must be passed to this component via props, which will probably include methods to fetch and modify data, and methods to change routes.

This means that EntityEditor will typically be above your editors routes! This ensures it will be able to control transitions between routes while continuing a workflow. TODO see ants example.

The EntityEditor higher order component will pass down an extra entityEditor prop to your component, which contains action functions to call and renderable info you can use in your editor. More info here TODO.

The EntityEditor higher order component must be given an EntityEditorConfig. This config is where you provide your app-specific behaviour. In particular this is where you provide the implementation of your operations.

Defining our terms

  • action

    Action are functions that the user can trigger with the UI, such as save or delete. Each action contains a workflow, and calling an action will start its workflow. Only one action can be in progress at a time.

  • workflow

    Workflows are a series of tasks that conditionally follow one another. The workflow progresses to subsequent tasks either by user choices or by data changes.

  • task

    Tasks are possible states in a workflow, such as confirming with the user if an operation should be performed, or operate-ing when a data operation is in progress. Tasks may include an operation, and / or may include a status.

  • operation

    Operations are functions that "do things" within your editor, usually firing off requests, changing data or modify the state of the UI. For example, when items are created or updated, or when the user goes to another view in the editor.

  • status

    Statuses are functions that "show things" within your editor - they make the task renderable by returning an object of strings and JSX elements (although they can return whatever you like). For example, they are used to ask for user input, or notify the user about the status of requests. By default they appear in a customizeable modal, but can be configured to be passed down as props for more specific rendering.

Entity Editor props

The EntityEditor higher order component passes down a single entityEditor prop. It is an object that contains the following:

  • entityEditor.actions :Object<ActionTriggerFunction>

    An object containing editor actions to be called in response to user interactions. ActionTriggerFunctions accept a single argument, an object of data to pass to the action.

  • entityEditor.operations :Object<OperationTriggerFunction>

    An object containing editor operations to be called. While normally you would call the action, calling operations is useful if you need to perform an operation outside of a workflow, and can therefore be executed even when an action is currently in progress.

  • entityEditor.actionable :boolean

    A boolean indicating if a new action is able to be started, which is useful for conditionally disabling buttons.

  • entityEditor.status :Object<any>|null

    If a task is in progress this will be an object containing renderable info about the current task. The exact contents of this object come from the config being used, e.g. config.tasks.<currentTask>.status

  • entityEditor.names :Object<string>

    Names is an object that contains strings representing the names of the entity, It contains singular, plural, caplitalized singular and capitalized plural in the following object shape using "cat" as an example:

    names = {
      item: "cat",
      items: "cats",
      Item: "Cat",
      Items: "Cats"
    };

Entity Editor Config

TODO