poui

This is a user interface for specifying partial orders built around the React component framework.

A "partial order" is simply an ordering of things in which some items share the same position in the ordering.

Usage

The package is available in the Node.js package repository as, "poui." Use your package manager to install it.

Use it in your application by requiring it, and then rendering at as a component. You can view demo/index.js as an example. Basically, you do this:

import React from "react";
import ReactDOM from "react-dom";
import { Poui } from "poui";

<div className="poui-root">
  <Poui
    itemList={[
      { "key": 'Z', "description": 'Zanahoria' },
      { "key": 'R', "description": 'Remolacha' },
      { "key": 'C', "description": 'Calabaza' },
      { "key": 'T', "description": 'Tomate' },
      { "key": 'L', "description": 'Lechuga' },
      { "key": 'M', "description": 'Morrón' },
      { "key": 'P', "description": 'Pimiento verde' },
      { "key": 'A', "description": 'Acetuna' },
    ]}
    parto={['T','L',['M','P'],'A']}
  />
</div>

The itemList JSON contains key and description pairs, one per item. The parto JSON contains the initial ordering, which can be an empty array, and which the component will update.

You can substitute "PartoWithSelection" for "Poui" to get a rendering without any stylesheet. See below the section on styling for more information.

For more about the content af the parto property, see Etapa05, however here is a summary:

Parto property

The parto property contains an array of keys, which keys are in the itemList, to reference items in partial order. Embedded arrays group items without any preference over one another at the position where the array occurs in the order.

In the example, ['T','L',['M','P'],'A'] indicates first Tomate, then Lechuga, then Morrón and Pimiento verde together, without any preference one over the other, and lastly Acetuna. Marrón and Pimiento verde are preferred over Acetuna but less preferred than Tomate and Lechuga. Shown in rank order, the preference example looks like this:

1. Tomate
2. Lechuga
3. • Morrón
   • Pimiento verde
4. Acetuna

Styling (CSS)

The project follows the BEM, Block, Element, Modifier method of styling, using classes. We prefix the block class names with "poui-."

A default stylesheet is provided for the Poui component. Find it as Poui.css in the src directory. For details, browse the components using an inspector, or view the component render methods of the components in the source tree.

The component, PartoWithSelection will render the interface completely without styling. It functions; however the click and drag targets are limited to the item numbers and bullets. Rendering using PartoWithSelection will enable complete control over the styling.

Development setup and making changes

The project uses:

• The React JavaScript library to develop a tree of user interface components rendered in a browser.
• The Node Package manager, npm for package management.
• Node.js as a JavaScript interpreter in development.
• A Node.js version manager, nvm to manage the Node.js JavaScript environment.
• Jest as a test driver.
• Enzyme to render and test the React components.

1. Pull the repository using git.
2. Have the Node.js package manager (npm) installed.
3. Install the packages using npm install.

Etapas

The project was originally developed in stages, or "etapas," each with a description of the work carried out in the stage. The work descriptions are in the docs directory as markdown documents with the name of the stage, e.g. Etapa01.md.

The etapas present a useful story if you would like to see how one person develops a project like this from seed to sapling.

Git tags mark the end of one stage and the beginning of the next. In other words, there is a tag, Etapa01 with all of the work committed to date before moving on to Etapa02.

1. Etapa01 Setup and list item component.
2. Etapa02 Implement container component.
3. Etapa03 Incorporate an ordering specification.
4. Etapa04 Add interaction to select items in order.
5. Etapa05 Support full partial order.
6. Etapa06 Add item click interaction for partial order.
7. Etapa07 Add drag and drop.

Etapas going forward

In further developments, issues and pull requests have any wanted, detailed remarks.