open-index/open-npm huggingface dataset:
npm package: @procedureflow/ui-extensions-tools
Description: This CLI is used to build, run, and manage your ProcedureFlow UI extensions.
Latest version: 0.0.3

### ProcedureFlow UI Extensions CLI

This CLI is used to build, run, and manage your ProcedureFlow UI extensions.

---

##### QuickStart Guide 
Your project must be a node.js React based application that uses the components & hooks from `@procedureflow/ui-extensions` to build your UI extension. 

1. Add `@procedureflow/ui-extensions-tools` to your project: 
  `yarn add @procedureflow/ui-extensions-tools`

2.  Add the app manifest, with the name `procedureflow-app.json` in the **project root** folder. See example manifest below.

3. Create a power shape ui extension. See below example.

4. Run the cli using either package managers: 
`yarn pf apps ui-extensions upload --api-token=<your-api-token>` 
or npm with npx 
`npx pf apps ui-extensions upload --api-token=<your-api-token>` 
Yarn classic is recommended.


##### Example app manifest `procedureflow-app.json`: 


```json
{
  "id": "myAppId123",
  "uiExtensions": {
    "views": [
      {
        "viewport": "powerShape.interaction",
        "component": "views/example-power-shape.js"
      }
    ],
    "contentSecurityPolicy": {
      "connectSrc": [
        "https://foo-bar-api.com"
      ],
      "purpose": "Foo bar"
    }
  }
}
```

##### Power shape `example-power-shape.js`:

```javascript
import React, { useState } from 'react';
import { PowerShapeInteractionView, Box, Option, Select } from '@procedureflow/ui-extensions';


function ExamplePowerShape() {

  const [value, setValue] = useState('');

  const changeHandler = (event) => {
    setValue(event.target.value);
  }

  return (
    <PowerShapeInteractionView title="Component Demo">
      <Box padding='small' stack='y' gap='medium'>
        <Box background='container' padding='small'>
          Selected value: {value}
        </Box>

        <Select label='Select' onChange={changeHandler}>
          <Option value=""></Option>
          <Option value="opt1">Option 1</Option>
          <Option value="opt2">Option 2</Option>
        </Select>
        
      </Box>
    </PowerShapeInteractionView>
  );
}

export default ExamplePowerShape;
```